Hydration Error for `rehype-expressive-code`
AlexanderHott opened this issue · comments
When running the Next.js example from this repo and when using a new create-next-app project following the next mdx setup and the expressive code nextjs installation, both projects produce a hydration error when rendering a basic mdx page.
{/* page.mdx */}
# hi
```go
func main() {
}
```
Full react stack trace
throwOnHydrationMismatch ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (12507:1) tryToClaimNextHydratableInstance ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (12535:1) updateHostComponent ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (19902:1) beginWork ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (21618:1) HTMLUnknownElement.callCallback ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4164:1) Object.invokeGuardedCallbackDev ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4213:1) invokeGuardedCallback ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (4277:1) beginWork$1 ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (27451:1) performUnitOfWork ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26557:1) workLoopSync ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26466:1) renderRootSync ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (26434:1) performConcurrentWorkOnRoot ../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js (25738:1) workLoop ../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (266:1) flushWork ../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (239:1) MessagePort.performWorkUntilDeadline ../node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js (533:1)
Output from npx --no-install next info
Operating System:
Platform: linux
Arch: x64
Version: #28-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 7 18:21:00 UTC 2024
Available memory (MB): 15163
Available CPU cores: 16
Binaries:
Node: 21.4.0
npm: 10.2.5
Yarn: N/A
pnpm: 8.15.4
Relevant Packages:
next: 14.2.1 // Latest available version is detected (14.2.1).
eslint-config-next: 14.2.1
react: 18.2.0
react-dom: 18.2.0
typescript: 5.2.2
Next.js Config:
output: N/A
I set up the example in this repo by running
corepack enable
corepack use pnpm@8.15.4
corepack pnpm build
cd packages/rehype-expressive-code/test/fixtures/nextjs/
corepack pnpm dev
I cannot reproduce this. Both setting up a brand new Next.js app and cloning your repo work without any issues. I can open your test page and see the fully working code block.
I deleted all my node modules, upgraded my package managers, reinstalled all the packages and now I'm not getting any more errors. Not sure what the issue is but I'm glad it's gone now. Thanks for all the help and the quick responses.
Hey, awesome that you got it to work! Thank you for your patience.
I'm glad to hear it wasn't actually an issue with anything we did, but a strange package manager issue. :)