million: Million either duplicate items or hide elements

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.

About this issue

Original URL
State: open
Created 4 months ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

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

V01D-NULL on Apr 18, 2024

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 on Apr 16, 2024

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

V01D-NULL on Apr 16, 2024

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.

SalahAdDin on Apr 9, 2024