nuxt: Failed to fetch dynamically imported module "/_nuxt/OpeningHours.CTqYYKGj.js"

Environment

Operating System: Windows_NT
Node Version: v21.6.1
Nuxt Version: 3.11.1
CLI Version: 3.11.1
Nitro Version: 2.9.5
Package Manager: npm@9.6.4
Builder: -
User Config: runtimeConfig, sourcemap, app, css, modules, i18n, alias, auth, build, site, schemaOrg, ogImage, sitemap, devtools
Runtime Modules: @sidebase/nuxt-auth @0.6.7, @nuxtjs/i18n @8.2.0, @pinia/nuxt @0.5.1, nuxt3-leaflet@1.0.12, @nuxtjs/seo @2.0.0-rc.10
Build Modules: -

Reproduction

This is an indeterministic bug in production, I cannot find commonalities when it occurs. Apple users (Safari browser) tend to have it more often. I get a lot of sentry errors and see it in the server logs, but mixed with a lot of correct requests, it works on all my devices and on ones of my colleagues, but according to sentry there are users who experience crashes.

Describe the bug

According to our sentry report, there are regular crashes of the app on many different pages (sometimes on the homepage, sometimes during search etc.), when nuxt fails to resolve a file path and the app crashes.

The majority of logs are fine, but still we see a regular issues popping up in sentry. The components that fail to resolve are also different. They work on all my devices, so I cannot reproduce the error in production. Nor does it occur in development.

We host the app on Azure App Service.

I recently upgraded to the latest nuxt version, where the naming of the chunks was changed, still I saw some logs today that a component with the old naming style could not be imported. I am not opting in for the old one, I switched to the default new one.

Can setting the builder: 'webpack' help?

I feel like this issue might be related @danielroe ? #21780

nuxt-error

Additional context

No response

Logs

No response

About this issue

Original URL
State: closed
Created 3 months ago
Reactions: 1
Comments: 19 (6 by maintainers)

Most upvoted comments

I can confirm that this issue (and others like it) occurs after a new deployment. This isn’t just related to “Lazy Components” as it gives me the “Failed to load dynamically…” message for pages, layouts and middleware modules (chunks) as well. My observations when the error occurs:

Lazy components
The new deployment has not yet been detected by the check-outdated-build plugin
The new deployment is detected by check-outdated-build and handled by Nuxt, but an unhandled exception still occurs (this error should be ignored)
After a new deployment, somehow after a new visit, the old version of the page is loaded (how? Browser cache?) and immediately crashes with a “Failed to load dynamically…” for chunks that have changed (new file hash?)

michalzaq12 on Mar 30, 2024

Duplicate of https://github.com/nuxt/nuxt/issues/23612

nandi95 on Apr 23, 2024

@mikeCrafted torahlive.com 😃

meirroth on Apr 2, 2024

We’ve also encountered these errors after deployments, which we fixed by triggering page reload on chunk error by adding the following file plugins/error-handler.ts:
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:chunkError', () => {
    window.location.reload()
  })
})
I believe Nuxt should handle this internally, as I am sure it is a common problem. Related Issues can be found on this thread: #14594

I see the possibility of an endless reload loop. That’s probably why Nuxt doesn’t support it internally.

michalzaq12 on Apr 2, 2024