NextJs+Turbo+ClerkJs+HMR causes Module was instantiated ... but ... is not available. It might have been deleted in an HMR update.

richardasymmetric commented 5 days ago

Link to the code that reproduces this issue

https://github.com/richardasymmetric/next-clerk-hmr-error

To Reproduce

Sorry for the convoluted reproduction, I'm actually not sure which project (nextjs or clerkjs or turbopack) that I should be reporting this to. I have previously encountered this issue but wasn't sure what caused it since it was a large project, but I started a fresh project today and ran into this issue once I'd added clerkjs into the project, and so it will require a clerk key to run the reproduction.

Clone the repo
Create the env: cp .env.development.local.sample .env.development.local
Fill in NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY
Run yarn dev
Go to localhost:3000/sign-in
Now, you can either edit the .env.development.local directly, or click the "trigger" button that will edit the .env file directly
This causes the hmr to trigger causing an HMR error.

I usually reproducing by editing code, but haven't found a consistent way to trigger it. It's a real show stopper for me when using --turbo and I've had to stop using it for the last few months because of this issue.

Current vs. Expected behavior

Expected behaviour: the hmr reloads and continues as expected

Actual behaviour:

Error: Module [project]/node_modules/next/dist/esm/client/components/error-boundary.js [app-ssr] (ecmascript) was instantiated because it was required from module [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/sign-in/[[...sign-in]]/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/sign-in/[[...sign-in]]/page.tsx [app-rsc] (ecmascript, Next.js server component)", METADATA_3 => "[project]/app/favicon.ico.mjs { IMAGE => \"[project]/app/favicon.ico [app-rsc] (static)\" } [app-rsc] (structured image object, ecmascript)" } [app-rsc] (ecmascript) <locals>, but the module factory is not available. It might have been deleted in an HMR update.
    at instantiateModule ([project]/.next/server/chunks/ssr/[turbopack]_runtime.js:492:15)
    at getOrInstantiateModuleFromParent ([project]/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at commonJsRequire ([project]/.next/server/chunks/ssr/[turbopack]_runtime.js:136:20)
    at require ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:19477)
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:89291
    at eo ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:89476)
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:91705
    at Object._fromJSON ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:92261)
    at JSON.parse (<anonymous>)
    at eu ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:89970)
    at en ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:89038)
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:96196
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:96213
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:96246
    at [project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:96263
    at t ([project]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:96486) {
  page: '/sign-in'
}

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #41-Ubuntu SMP PREEMPT_DYNAMIC Fri Aug  2 20:41:06 UTC 2024
  Available memory (MB): 32038
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: 
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.13 // Latest available version is detected (14.2.13).
  eslint-config-next: 14.2.13
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I can reproduce this in next@15.0.0-canary.166

My current hypothesis for this is that there might be multiple versions of either react or next via dependencies, but I'm not certain

jeiea commented 4 days ago

I encountered this on macOS node 22, next 14.2.13 too.

This happened in a situation where I changed the component source, not the .env file.

richardasymmetric commented 2 days ago

I encountered this on macOS node 22, next 14.2.13 too.

This happened in a situation where I changed the component source, not the .env file.

Are you able to make a better reproduction than I was using the source editing? I wasn't consistently able to do it, but once it triggered, the only way to recover was to restart the next dev server.

vercel / next.js