node.jsvuejs3vuetify.jsprogressive-web-appsnuxt3.js

Failed to fetch dynamically imported module in nuxt3

I am learning nuxt3, I have been stuck on this problem, and I have gone through some posts regarding to this error but all solutions do not work for me. I am developing a nuxt3 app, with vuetify, Bootstrap and pwa module from kevinmarrec/nuxt-pwa-module.

When I run the app with npm run dev everything seems to start building fine, but after the page is loaded at first I get the right view of the page "Hello nuxt", but within 2-4 seconds the page changes to:

500 Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue

I have try to solve this on Windows 10 and Kernel: Linux 6.0.0-kali6-amd64 without a success. On both platforms I am using node v18.14.1.

index.vue

      <template>
         <div>
            <h1>Hello nuxt</h1>
       </div>
     </template>
     <script>
        export default { }
     </script>
     <style scoped> </style>

below is the configuration of the vuetify.ts file inside plugins folder

     import { createVuetify } from 'vuetify'
     import * as components from 'vuetify/components'
     import * as directives from 'vuetify/directives'

     export default defineNuxtPlugin(nuxtApp => {
          const veutify = createVuetify({
                    ssr: true,
                    components,
                    directives,
            });
      nuxtApp.vueApp.use(veutify)
     });

Below is the configuration of nuxt.config.ts file

     export default defineNuxtConfig({
     nitro: {
        esbuild: {
          options: {
          target: 'esnext'
            }
         }
       },
     css: ["vuetify/lib/styles/main.sass",
         '@mdi/font/css/materialdesignicons.min.css',
         "bootstrap/dist/css/bootstrap.min.css"
         ],
    build: {
      transpile: ["vuetify"],
     },
   vite: {
    define: {
        "process.env.DEBUG": false,
        },
    },
   modules: ['@kevinmarrec/nuxt-pwa'],
   pwa: {
      workbox: {
      enabled: true
        }
   },
   runtimeConfig: {
       public: {
         BASE_URL: 'some fallback value',
        },
   },
})

package.json file

    {
      "private": true,
      "scripts": {
      "build": "nuxt build",
      "dev": "nuxt dev",
      "generate": "nuxt generate",
      "preview": "nuxt preview",
      "postinstall": "nuxt prepare"
    },
      "devDependencies": {
        "@kevinmarrec/nuxt-pwa": "^0.16.2",
        "@nuxtjs/pwa": "^3.3.5",
        "nuxt": "^3.2.2"
       },
     "dependencies": {
       "@mdi/font": "^7.1.96",
       "bootstrap": "^5.2.3",
       "sass": "^1.58.3",
       "vee-validate": "^4.7.4",
       "vuetify": "^3.1.5"
        }
       }

below is the error I receive

enter image description here

And on console I get this error and warning

enter image description here

And final this warning below

enter image description here

What exactly am I doing wrong that trigger this, which seems to be a chunk.?

Solution

  • I was also getting the same error. I resolved it running cleanup command -

    npx nuxi clean|cleanup [rootDir]

    then

    npm run dev

    doc link

    The cleanup command removes common generated Nuxt files and caches, including:

    • .nuxt
    • .output
    • node_modules/.vite
    • node_modules/.cache