Million either duplicate items or hide elements

[SalahAdDin]

What version of million are you using?

3.0.5

Are you using an SSR adapter? If so, which one?

NextJS

What package manager are you using?

pnpm

What operating system are you using?

Linux

What browser are you using?

Firefox

Describe the Bug

As described here, when Million renders client-side components, it creates slots to wrap such components, miss-doing all styles, and even sometimes, hiding elements:

For fixing we tried the experimental option, but it seems not to work with NextJS:

const millionConfig = {
  auto: { rsc: true },
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

What's the expected result?

It should render a single item respecting the styles given for each element.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-bwarze?file=pages%2Fpageroot.tsx

Participation

• I am willing to submit a pull request for this issue.

[github-actions]

Thanks for opening this issue! A maintainer will review it soon.

[Aslemammad]

As the react team mentioned in multiple places, it's soon going to break the its-fine package. And that's the exact package we're using for experimental_options.noSlot so we might remove this feature soon.

That's really sad to do, but the right thing to do, though I haven't talked to the team about it. So I need to talk to the team and see what decision we take regards experimental_options.noSlot.

So I recommend you disable that option. Regards the broken styles, that's expected when the slots are there. How can I help you with that?

[SalahAdDin]

As the react team mentioned in multiple places, it's soon going to break the its-fine package. And that's the exact package we're using for experimental_options.noSlot so we might remove this feature soon.

That's really sad to do, but the right thing to do, though I haven't talked to the team about it. So I need to talk to the team and see what decision we take regards experimental_options.noSlot.

So I recommend you disable that option. Regards the broken styles, that's expected when the slots are there. How can I help you with that?

But that option was the solution about slots. We need to remove the slot since they break the styles. @Aslemammad

[SalahAdDin]

Using the experimental noSlot option It works fine:

const millionConfig = {
  auto: { rsc: true },
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

[SalahAdDin]

It does not work anymore:

Dropping out the library definitively.

[tobySolutions]

It does not work anymore:

Dropping out the library definitively.

We're currently working on a fix @SalahAdDin, please bear with us. Thank you 🙌

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[SalahAdDin]

It does not work anymore:
Dropping out the library definitively.

We're currently working on a fix @SalahAdDin, please bear with us. Thank you 🙌

Up just to not being stale.

[V01D-NULL]

what's the status/ETA on this @tobySolutions?
I'm looking into millionjs because we need increased page speed in the hydration/rendering stage but with a navbar that looks like this my hands are tied

My million config object:

const millionConfig = {
  auto: true,
  server: true,
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

Tried stopping and restarting my dev server to no avail.
The million package is up to date which at the time of writing is 3.0.6

[SalahAdDin]

what's the status/ETA on this @tobySolutions? I'm looking into millionjs because we need increased page speed in the hydration/rendering stage but with a navbar that looks like this my hands are tied

My million config object:

const millionConfig = {
  auto: true,
  server: true,
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

Tried stopping and restarting my dev server to no avail. The million package is up to date which at the time of writing is 3.0.6

yeah, this is exactly our issue.

[tobySolutions]

what's the status/ETA on this @tobySolutions? I'm looking into millionjs because we need increased page speed in the hydration/rendering stage but with a navbar that looks like this my hands are tied

My million config object:

const millionConfig = {
  auto: true,
  server: true,
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

Tried stopping and restarting my dev server to no avail. The million package is up to date which at the time of writing is 3.0.6

Hmm, thank you for this! I'll inform the team of this, for now I think you could million-ignore the navbar component:
https://million.dev/docs/automatic#ignoring-components

[SalahAdDin]

what's the status/ETA on this @tobySolutions? I'm looking into millionjs because we need increased page speed in the hydration/rendering stage but with a navbar that looks like this my hands are tied

My million config object:

const millionConfig = {
  auto: true,
  server: true,
  rsc: true,
  experimental_options: {
    noSlot: true,
  },
};

Tried stopping and restarting my dev server to no avail. The million package is up to date which at the time of writing is 3.0.6

Hmm, thank you for this! I'll inform the team of this, for now I think you could million-ignore the navbar component: https://million.dev/docs/automatic#ignoring-components

It is not a solution, it happens with all client components now.

[V01D-NULL]

Yeah, it looks like I'm going to have to heavily restrict the million compiler because this can happen on any component, and it's a fairly sizable website so testing for edge cases is going to be very time consuming.

A pagespeed test on our staging deployment showed significant improvements in LCP and a slight reduction in the next js framework bundle execution time which is all the react rendering/hydration, so I have high hopes for million if it's stable when slots are disabled. (fwiw my config does not disable slots, I still see them in the DOM. That's the bug I'm hoping to have a fix for)

Looks like my best course of action is using manual mode on select pages and/or waiting it out.

I'm not sure about @SalahAdDin's claim that it happens to all client components, it seems to work fine on my end using the pages router. He might have a different issue/different reproduction than I do.

[SalahAdDin]

Yeah, it looks like I'm going to have to heavily restrict the million compiler because this can happen on any component, and it's a fairly sizable website so testing for edge cases is going to be very time consuming.

A pagespeed test on our staging deployment showed significant improvements in LCP and a slight reduction in the next js framework bundle execution time which is all the react rendering/hydration, so I have high hopes for million if it's stable when slots are disabled. (fwiw my config does not disable slots, I still see them in the DOM. That's the bug I'm hoping to have a fix for)

Looks like my best course of action is using manual mode on select pages and/or waiting it out.

I'm not sure about @SalahAdDin's claim that it happens to all client components, it seems to work fine on my end using the pages router. He might have a different issue/different reproduction than I do.

We are using app router.

[V01D-NULL]

any updates? This issue has been awaiting a promised fix for a month

[tobySolutions]

any updates? This issue has been awaiting a promised fix for a month

This will be fixed in the next major release very soon. I'll check with the team to track updates on this.

[tobySolutions]

Hey there people! I have raised the priority of this with the team so they are aware of this. Please do bear with us as we are hard at work to help you resolve these issues.

[V01D-NULL]

Awesome, thanks a bunch!
Do you have an estimated timeline for us?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[SalahAdDin]

Is there any ETA for these fixes?

[V01D-NULL]

Please note that I have unsubscribed from this conversation, and will not receive further updates unless I'm pinged.
We have moved on with other options and are not actively considering million js at this time.

Thank you

[SalahAdDin]

Please note that I have unsubscribed from this conversation, and will not receive further updates unless I'm pinged. We have moved on with other options and are not actively considering million js at this time.

Thank you

could you mention the alternatives you are thinking about?

[V01D-NULL]

Please note that I have unsubscribed from this conversation, and will not receive further updates unless I'm pinged. We have moved on with other options and are not actively considering million js at this time.
Thank you

could you mention the alternatives you are thinking about?

I can't go into details because I signed an NDA, but think along the lines of improved caching, utilizing/migrating to the app router, constantly checking core web vitals and crux to see which of our theories helps etc.

There are no frameworks or plugins/adapters for frameworks that we are considering right now.
Million js was just a "lets see if this will do any good short term" type of thing anyways

[aidenybai]

I'm not sure if Million.js can help in this case – it mainly works to optimize DOM operations. Have you tried Million Lint?

[SalahAdDin]

I'm not sure if Million.js can help in this case – it mainly works to optimize DOM operations. Have you tried Million Lint?

Are you talking about my issue?

[V01D-NULL]

No, he's referring to mine.
Million was meant to be tested as a short term bandaid, and applied if it helped us bump our scores while we worked on other improvements.

Of course a faster rendering process is not a catch all solution to increase core web vital scores

[SalahAdDin]

@aidenybai I could not check this with Million Lint cause the following issue.

[cohenerickson]

Running into the same issue in v3.1.11

export default defineConfig({
  plugins: [
    million.vite({
      auto: true,
      telemetry: false
    }),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true
      }
    }),
    tsconfigPaths()
  ]
});

[SalahAdDin]

Running into the same issue in v3.1.11

export default defineConfig({
  plugins: [
    million.vite({
      auto: true,
      telemetry: false
    }),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true
      }
    }),
    tsconfigPaths()
  ]
});

did you try with Million Lint?