vue.js - `npm audit` Issue and `'defineComponent' Error` in `npm run dev` for Nuxt App - Stack Overflow

admin管理员组

文章数量:1292385

The package.json of my project is as follows. Everything in the project is fine, but the only problem is that the npm audit check fails.

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

In order to pass the npm audit check, after making the following changes, the npm audit can pass smoothly.

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

However, when running npm run dev, the following error occurs:

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

How can I solve this problem?

The package.json of my project is as follows. Everything in the project is fine, but the only problem is that the npm audit check fails.

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

In order to pass the npm audit check, after making the following changes, the npm audit can pass smoothly.

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

However, when running npm run dev, the following error occurs:

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

How can I solve this problem?

• vue.js
• npm
• nuxt.js
• vite

Share Follow asked Feb 13 at 8:49 Kerwin BryantKerwin Bryant 30911 gold badge44 silver badges1212 bronze badges 2

• Remove the overrides. They added mayor version changes with breaking changes. Some dependencies don't support these versions. – jabaa Commented Feb 13 at 9:02
• Do a sanity check when analyzing audit reports. Most just need to be ignored – Estus Flask Commented Feb 13 at 11:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Check For Vite compatibility with Nuxt, Currently Nuxt support Vite (version 5) but you are using version 6 which is why you are getting this compatibility issue. To fix this downgrade Vite version to 5.

本文标签： vuejsnpm audit Issue and 39defineComponent39 Error in npm run dev for Nuxt AppStack Overflow