Nuxt项目npm audit通过后npm run dev报defineComponent未定义错误

问题场景 #

原Nuxt项目运行正常，但执行npm audit时检查不通过。添加overrides配置强制指定rollup和vite版本后，npm audit顺利通过，但运行npm run dev时出现以下错误：

500
Cannot read properties of undefined (reading 'defineComponent')

at ./node_modules/vue-countup-v3/dist/vue-countup-v3.umd.js:1:223
at ./node_modules/vue-countup-v3/dist/vue-countup-v3.umd.js:1:232
at ModuleJob.run (node:internal/modules/esm/module_job:268:25)
at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
at async ViteNodeRunner.interopedImport (./node_modules/vite-node/dist/client.mjs:421:28)
at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:280:24)
at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:206:14)
at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:259:12)
at async ./src/components/home/Numbers.js:1:31

原项目package.json配置：

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "^1.7.0",
    "@nuxtjs/plausible": "^0.2.3",
    "@tailwindcss/typography": "^0.5.10",
    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
    "autoprefixer": "^10.4.16",
    "nuxt": "^3.8.0",
    "nuxt-gtag": "^1.1.1",
    "nuxt-module-hotjar": "^1.3.2",
    "nuxt-vite": "^0.3.5",
    "pinia": "^2.1.7",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3",
    "vue": "^3.3.6",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.16",
    "@heroicons/vue": "^2.0.18",
    "@nuxt/content": "^2.8.5",
    "@pinia/nuxt": "^0.5.1",
    "@tailwindcss/forms": "^0.5.6",
    "remark-reading-time": "^2.0.1",
    "ua-parser-js": "^1.0.36",
    "vue-countup-v3": "^1.4.0",
    "vue-tippy": "^6.4.4"
  }
}

添加的overrides配置：

@@ -36,5 +36,9 @@
    "ua-parser-js": "^1.0.36",
    "vue-countup-v3": "^1.4.0",
    "vue-tippy": "^6.4.4"
+  },
+  "overrides": {
+    "rollup": "4.34.6",
+    "vite": "6.1.0"
   }
 }

问题原因 #

1. 版本不兼容：指定的vite: 6.1.0是不存在的版本（当前Vite稳定版最高为5.x），rollup: 4.34.6与Nuxt 3.8.0依赖的Rollup版本（~3.29.0）冲突，导致依赖树混乱。
2. 依赖解析失败：版本冲突使得vue-countup-v3无法正确获取Vue的defineComponent方法，从而抛出错误。

解决方案 #

方案1：修正overrides为兼容版本 #

将overrides修改为与Nuxt 3.8.0兼容的版本：

"overrides": {
  "rollup": "3.29.4",
  "vite": "4.5.0"
}

这两个版本是Nuxt 3.8.0官方依赖的兼容版本，既能解决npm audit的安全问题，又不会破坏项目运行。

方案2：清理并重装依赖 #

1. 删除本地依赖目录和锁文件：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

方案3：升级Nuxt到稳定版本 #

如果允许，将Nuxt升级到较新的稳定版本（如3.10+），新版本会自带修复安全问题的依赖，可能无需手动添加overrides即可通过npm audit。升级命令：

npm install nuxt@latest

验证步骤 #

1. 执行npm audit确认安全检查通过
2. 执行npm run dev确认项目正常启动，无报错

内容的提问来源于stack exchange，提问作者Kerwin Bryant