New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hydration failed - Next.js 14 #1008
Comments
Thanks for opening this issue! A maintainer will review it soon. |
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. |
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 |
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 |
@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 |
Awesome! Thank you very much, I really appreciate it. |
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,
}) |
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. |
Having the same issue |
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. |
Not stale. That's aggressive. |
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. |
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? |
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. |
Not resolved. Let me know if you're waiting on me for anything. |
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
I am getting a hydration error:
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
The text was updated successfully, but these errors were encountered: