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]

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

[bernatfortet]

I removed all instances of must-revalidate or no-store.
But still the same issue.

Man... I've had SO many issues with next.js lately it's really getting in the way of build the app. It makes me want to leave next.js for real...

[icyJoseph]

What kind of issues though?

I had somehow missed this issue discussion. So is the issue here that somehow the browser loads an out-of-sync chunk 🤔 What Next.js version triggers this? Is browser caching the only way for this to happen?

[janglad]

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

this looks like regular fetches within your app right? Those should be fine. Did you check the headers on the actual chunks coming in from .next/static/chunks?

[atalayio]

Seems like there is no error just because probably of "cache" just enable "disable cache" feature on your browser. It would be fine I guess.

[benjaminirving-vecml]

Goat

[bernatfortet]

@atalayio in my case I need to debug mobile web and pwa states so this "Disable cache" doesn't work in that context.

Also, why would we want to disable cache? That's part of the work. To create a good cache strategy to load faster. If I disabled it then I can't test that.