consistent x was instantiated because it was required from module y but the module factory is not available. It might have been deleted in an HMR update.

[janglad]

We have a somewhat large (and admittedly not very well organised) turbo repo where our main app is a Next 15.3.5 app router one with Turbopack. We're using pnpm, have no wrapper like sentry around our next config (and have tried disabling instrumentation too). On local dev we consistently run into errors like

Error: Module [project]/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/react-i18next/dist/es/index.js [app-client] (ecmascript) <module evaluation> was instantiated because it was required from module [project]/apps/backend/dist/features/client/browser.jsx [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.

I'd say 85% of the time these point to files in our own monorepo. Refreshing the page with disable cache on in the network tab always fixes it for that load of the page. We've tried the obvious clearing browser cache etc but this does not help. Running the app in an incognito window initially goes fine, but then starts having the same issues.

Apart from this HMR in general is pretty broken in our app with modules very often not updating.

Does anyone have any idea what we could try to resolve this?

[bernatfortet]

I have the same issue! The only way I have to develop is to hard refresh, but a normal refresh or HMR refresh gives me that issue.

Here are all the related issues:

• [turbopack] App breaks when used with serverActions #57095 (super old, but same pattern, in theory there was a pr fixing it)
• NextJs+Turbo+ClerkJs+sentry+HMR causes Module was instantiated ... but ... is not available. It might have been deleted in an HMR update. #70424
• Next15 + Turbo dev cause instantiated because it was required from module but the module factory is not available.It might have been deleted in an HMR update. #74167 (closed b/c of repro steps)
• Next.js + Turbopack: HMR Error PostHog/posthog-js#1585 (Issue in Posthog-js repo)
• Next 15 breaks with React Compiler enabled getsentry/sentry-javascript#15457

[janglad]

@janglad this post https://x.com/vishyfishy2/status/1950284088557900213 gave me the clue. It's f***ing browser cache problem. Try a different browser or clear the cache. It fixed my issue immediately.

I don't know what causes it but there it is.

It did indeed seem to be browser cache related, since opening network tab -> disable cache -> refresh consistently fixes it. However the issue keeps returning after that, also in new browsers/ incognito. The path in the error would sometimes refer to files that got moved/deleted a while ago, but grepping the .next folder did show references to them in there, which makes me think it's not just the browser.

In our case the issue almost always seemed related to splitting between client/server. I've been able to reduce the occurrence of the issue by quite a bit by finding re exports/barrel files in our codebase that cross that boundary (like say an index.ts file that exports UserForm and updateUserAction)

[janglad]

@bernatfortet check out this thread on Twitter, does this apply to you too? Big shoutout to Tim for the help.

[bernatfortet]

Unfortunately that's not my case.
But yes I agree, the issue happens when files get moved/edited/deleted. But I haven't been able to repro yet.

[janglad]

Unfortunately that's not my case. But yes I agree, the issue happens when files get moved/edited/deleted. But I haven't been able to repro yet.

Since it does seem browser cache related for you, can you check the cache headers for the requests for the offending chunks just to be sure? It should be no-store, must-revalidate I think.

[bernatfortet]

Oh wow! You're right. I had this code below.

  const res = await fetch(url, {
    headers: { Authorization: `Bearer ${token}` },
    cache: 'no-store',
  })

and this

export function createTenantManifestResponse(params: { manifest: any; cacheSeconds?: number }) {
const { manifest, cacheSeconds = 0 } = params

const response = new Response(JSON.stringify(manifest), {
  headers: {
    'Content-Type': 'application/manifest+json',
    'Cache-Control': cacheSeconds > 0 ? `public, max-age=${cacheSeconds}` : 'max-age=0, must-revalidate',
  },
})

return response
}

I'll see if this helps