Hydration failed - Next.js 14

[drewbitt]

What version of million are you using?

3.0.6

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Vivaldi (Chrome)

Describe the Bug

Info: Next.js 14.1.4, React 18.2.0 Node 18

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

I am getting a hydration error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Did not expect server HTML to contain a <slot> in <slot>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
slot
MillionBlock
eval
ToastContextProvider
QueryClientProvider
SessionProvider
AppWrapper
MyApp

What's the expected result?

No errors. I do not have any slots in my code; this is all within Million itself and works without Million

This was not fixed with the previous report and fix in #977

Link to Minimal Reproducible Example

None - if I separate out the ToastContextProvider into a seperate app, I am not getting a reproduction, and as this is all within Million interacting with itself it is hard to do easily

Participation

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

[github-actions[bot]]

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

[tobySolutions]

Hmm, can you come into the server to report this @drewbitt? Maybe we can get on a call? We would need a reproduction before we're able to help.

https://million.dev/chat

[madebyfabian]

Having the same issue with Next.js 14.1.4 and pages router:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Did not expect server HTML to contain a <section> in <slot>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
slot
MillionBlock
eval
SectionLayoutContent
SectionPopularCompares
div
SectionHero
main
Layout
Page
LazyMotion
MotionConfig
PlausibleProvider
App

I get the same error with <footer> or <tr> elements. Changing these elements into a <div> removes most of the errors. But this cannot be a solution, especially with <tr> 😄

[tobySolutions]

Hmm, thank you very much for these. Really appreciate it. Can you please help with a reproduction though? I use Million in Nextjs pages router app and I don't get this issue at all.

Hey @drewbitt, why are you using this specific configuration?

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

Please refer to the documentation here: https://million.dev/docs/install#install-manually

[madebyfabian]

@tobySolutions Sorry! Of course, here is a reproduction. It has a slightly different error message, but it's the same issue. It's a blank next.js project (pages router), where I just added a <table> and <section> component https://stackblitz.com/github/madebyfabian/nextjs-million-reprod?file=pages%2Findex.tsx

[tobySolutions]

@tobySolutions Sorry! Of course, here is a reproduction. It has a slightly different error message, but it's the same issue. It's a blank next.js project (pages router), where I just added a <table> and <section> component https://stackblitz.com/github/madebyfabian/nextjs-million-reprod?file=pages%2Findex.tsx

Awesome! Thank you very much, I really appreciate it.

[tobySolutions]

Hey there @drewbitt, can you maybe try this config?

import million from 'million/compiler'

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
}

export default million.next(nextConfig, {
    auto: true,
    server: true,
    rsc: true,
})

[drewbitt]

I appreciate the reproduction @madebyfabian and the config @tobySolutions. The config update does fix this for me and I do not have the hydration error. I assume the docs should be updated as I was not seeing this as the recommended config for Nextjs.

[drewbitt]

Actually though, I see that in my code and the reproduction, before I was getting notice of each component and how much Million speeds things up. Changing it to that config however which makes this not break disables that printout, so I'm not sure Million is working at all.

Before:

After:

[fristyr]

drewbitt

Having the same issue

[github-actions[bot]]

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.

[drewbitt]

Not stale. That's aggressive.

[tobySolutions]

Actually though, I see that in my code and the reproduction, before I was getting notice of each component and how much Million speeds things up. Changing it to that config however which makes this not break disables that printout, so I'm not sure Million is working at all.

Before:

After:

Hey there, sorry for the late response on this. Can you try reverting to the previous config then? You shouldn't be getting hydration errors though.

[drewbitt]

Reverting it to the previous config would just be the reproduction of the hydration error in stackblitz.com/github/madebyfabian/nextjs-million-reprod?file=pages%2Findex.tsx above, no? Do you mean something else?

[github-actions[bot]]

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.

[drewbitt]

Not resolved. Let me know if you're waiting on me for anything.

[devotox]

Same issue here. I seem to see it with SVG icons sometimes and then it seems a hidden sidebar on mobile with a 'ul' tag has the issue. Does not happen on desktop where the sidebar is shown from the beginning

[conors06]

Having this issue as well.