Nuxt3动态导入模块失败问题求助（附项目配置）

执行npm run dev后页面初始显示“Hello nuxt”，但2-4秒后跳转至500错误页面，提示Failed to fetch dynamically imported module: http://localhost:3000/_nuxt/pages/index.vue。已在Windows 10和Linux 6.0.0-kali6-amd64平台（均使用Node v18.14.1）尝试解决，现有方案无效。

项目配置文件 #

index.vue #

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

plugins/vuetify.ts #

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)
});

nuxt.config.ts #

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 #

{
  "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"
  }
}

错误与警告截图 #

问题 #

请问哪里配置有误导致该动态导入模块失败问题？

修复方案 #

1. 移除冲突的PWA模块
   package.json中同时安装了@kevinmarrec/nuxt-pwa（Nuxt3适配）和@nuxtjs/pwa（主要适配Nuxt2），二者功能重叠且存在兼容性冲突。执行命令清理：

   npm uninstall @nuxtjs/pwa
   

   确保nuxt.config.ts的modules数组仅保留['@kevinmarrec/nuxt-pwa']。

2. 修正Vuetify插件拼写错误
   plugins/vuetify.ts中变量名veutify是拼写错误，应改为vuetify：

   // 修正后代码
   const vuetify = createVuetify({
     ssr: true,
     components,
     directives,
   });
   nuxtApp.vueApp.use(vuetify)
   

   拼写错误会导致Vuetify初始化失败，进而引发页面组件动态加载异常。

3. 调整ESBuild目标版本
   将nuxt.config.ts中nitro.esbuild.options.target从esnext改为es2020，避免部分环境不支持最新ES语法：

   nitro: {
     esbuild: {
       options: {
         target: 'es2020'
       }
     }
   },
   

4. 清理缓存重启项目
   执行以下命令清除缓存并重装依赖：

   rm -rf .nuxt node_modules package-lock.json
   npm install
   npm run dev
   

以上步骤可解决动态导入模块失败的问题，核心原因是PWA模块冲突与Vuetify插件拼写错误导致的运行时异常。

内容的提问来源于stack exchange，提问作者Gabriel Rogath