Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Open
richardasymmetric opened this issue Sep 24, 2024 · 0 comments
Open

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

richardasymmetric opened this issue Sep 24, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Developer Experience Issues related to Next.js logs, Error overlay, etc. Turbopack Related to Turbopack with Next.js.

Comments

@richardasymmetric
Copy link

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.

  1. Clone the repo
  2. Create the env: cp .env.development.local.sample .env.development.local
  3. Fill in NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY
  4. Run yarn dev
  5. Go to localhost:3000/sign-in
  6. Now, you can either edit the .env.development.local directly, or click the "trigger" button that will edit the .env file directly
  7. 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
@richardasymmetric richardasymmetric added the bug Issue was opened via the bug report template. label Sep 24, 2024
@github-actions github-actions bot added Developer Experience Issues related to Next.js logs, Error overlay, etc. Turbopack Related to Turbopack with Next.js. labels Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Developer Experience Issues related to Next.js logs, Error overlay, etc. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@richardasymmetric