[Vue Router warn]: uncaught error during route navigation when building with webpack

[ssaneemf]

Environment

• Operating System: Windows_NT
• Node Version: v20.15.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.16.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: webpack
• User Config: default
• Runtime Modules: -
• Build Modules: -

Reproduction

Steps to reproduce:

1. create a new nuxt 3 project via npx nuxi@latest init
2. add builder: 'webpack' in nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  builder: 'webpack'
})

4. install @nuxt/webpack-builder as devDependency

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.14.1592",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxt/webpack-builder": "^3.14.1592"
  }
}

6. create /pages folder and index.vue
7. add <NuxtPage /> to app.vue
8. start the project via npm run dev
9. open created localhost link in browser Minimal reproduction link

Describe the bug

Running in development mode (and shortly seems to be an issue for production build also) and opening app in browser leads to error in Vue Router. You can still get it work by redirecting to other path by clicking the link to another page, but the error will return after page refresh which is extremely uncomfartable for local work

Setting ssr: false in nuxt.config.ts solves this issue, but we need ssr: true for the project

Additional context

No response

Logs

[Vue Router warn]: uncaught error during route navigation:
Cannot destructure property '__webpack_ids__' of 'data' as it is undefined.

 at installChunk (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Promise.all (index 0)
  at setup (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at applyPlugin (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at executePlugin (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at applyPlugins (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at createNuxtAppServer (node_modules\nuxt\dist\core\runtime\nitro\renderer.js:525:1)
  at async Object.renderToString (/D:/dev/text-nuxt/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-dksvnc-l71vra (Open reproduction)

[ssaneemf]

Also fails for production build, tested locally and on server (cannot share any github repo as it's company's project, not my personal, but it works the same on minimal project setup descriped above)

Testing locally:

npm run build
npm run preview

Getting:

TypeError: dynamicChunks[id] is not a function
    at dynamicRequire (file:///D:/dev/text-nuxt/.output/server/chunks/virtual/_dynamic-require.mjs:6:27)
    at file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:771:121
    at async Promise.all (index 0)
    at async setup (file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:1232:74)
    at async Object.callAsync (file:///D:/dev/text-nuxt/.output/server/chunks/_/nitro.mjs:5630:16)
    at async applyPlugin (file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:527:25)
    at async executePlugin (file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:563:9)
    at async applyPlugins (file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:577:5)
    at async createNuxtAppServer (file:///D:/dev/text-nuxt/.output/server/chunks/build/server.mjs:1727:7)
    at async Object.renderToString (file:///D:/dev/text-nuxt/.output/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)

No luck trying to downgrade nuxt or @nuxt/webpack-builder, tested since version 3.9.3

Any gueses on how to fix it or maybe someone can share working configuration for building with webpack?

[danielroe]

This is reproducible in this repo as well when updating webpack + memfs: https://github.com/nuxt/nuxt/pull/30211.

I haven't yet dived into the cause but you could try pinning both of them (possibly another dependency of webpack as well - check your lockfile to see what diff caused the problem).

(You could also try pinning nitropack as the dynamic chunks plugin in v2 branch there is what is responsible for processing webpack output.)

[ssaneemf]

Thanks for the tip about memfs! Production build fixed by overriding memfs and webpack versions in package.json

"overrides": {
    "webpack": "5.96.0",
    "memfs": "4.14.0"
  }

Unfortunately still no luck fixing development, getting error showed in Logs of this issue