Hydration failed - Next.js 14 about million HOT 14 OPEN

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:

from million.

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,
})

from million.

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

from million.

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

from million.

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> 😄

from million.

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

from million.

@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

from million.

@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.

from million.

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.

from million.

drewbitt

Having the same issue

from million.

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.

from million.

Not stale. That's aggressive.

from million.