Блог

Главная - Вопросы по программированию - npx create-nuxt-приложение, за которым следует npm run dev, выдает несоответствие версий пакетов Vue

npx create-nuxt-приложение, за которым следует npm run dev, выдает несоответствие версий пакетов Vue

#javascript #node.js #vue.js #npm #nuxt.js

Вопрос:

Я только начинаю работать с Nuxt, поэтому я npx create-nuxt-app my-app использовал следующие параметры:

  Project name: client
 Programming language: JavaScript
 Package manager: Npm
 UI framework: Tailwind CSS
 Nuxt.js modules: Axios - Promise based HTTP client
 Linting tools: ESLint
 Testing framework: AVA
 Rendering mode: Universal (SSR / SSG)
 Deployment target: Server (Node.js hosting)
 Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
 Continuous integration: None
 Version control system: None

Когда я бегу npm run dev , я получаю эту ошибку:

  ERROR  Failed to compile with 2 errors                                                                                                                 friendly-errors 07:48:10


 ERROR  in ./.nuxt/components/nuxt-error.vue                                                                                                            friendly-errors 07:48:10

Module Error (from ./node_modules/vue-loader/lib/index.js):                                                                                             friendly-errors 07:48:10


Vue packages version mismatch:

- vue@2.6.12
- vue-template-compiler@2.5.22

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

                                                                                                                                                        friendly-errors 07:48:10
 @ ./.nuxt/index.js 24:0-52 335:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=trueamp;timeout=30000amp;ansiColors=amp;overlayStyles=amp;path=/__webpack_hmr/clientamp;name=client ./.nuxt/client.js
                                                                                                                                                        friendly-errors 07:48:10

 ERROR  in ./.nuxt/components/nuxt-error.vue                                                                                                            friendly-errors 07:48:10

Module build failed (from ./node_modules/vue-loader/lib/index.js):                                                                                      friendly-errors 07:48:10
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/path/my-app/node_modules/vue-loader/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/path/my-app/node_modules/vue-loader/lib/index.js:67:22)
                                                                                                                                                        friendly-errors 07:48:10
 @ ./.nuxt/index.js 24:0-52 335:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=trueamp;timeout=30000amp;ansiColors=amp;overlayStyles=amp;path=/__webpack_hmr/clientamp;name=client ./.nuxt/client.js

Вот что я пробовал до сих пор:

  • npm audit fix --force
  • npm clean cache --force
  • Удаление package-lock.json, node_modules и npm install

Редактировать:

Мне удалось исправить это, включив в свои зависимости от пакетов следующее:

 "vue": "2.5.22",
"vue-server-renderer": "2.5.22",
"vue-template-compiler": "2.5.22"

Но теперь я получаю предупреждение:

 Severity: high
Cross-Site Scripting - https://npmjs.com/advisories/1426
Remote Code Execution - https://npmjs.com/advisories/1548
fix available via `npm audit fix --force`
Will install vue-server-renderer@2.6.12, which is outside the stated dependency range
node_modules/vue-server-renderer/node_modules/serialize-javascript
  vue-server-renderer  2.3.0-beta.1 - 2.6.10
  Depends on vulnerable versions of serialize-javascript
  node_modules/vue-server-renderer

2 vulnerabilities (1 moderate, 1 high)
I can live with this warning, but it looks like the default Nuxt app creation isn't working, at least on my machine.

Это работает, но все равно кажется каким-то обходным путем, и я все равно не уверен, что использую правильные версии этих пакетов.

Я также пытался обновить их все, но это не сработало:

 Found: vue-template-compiler@2.6.12
npm ERR! node_modules/vue-template-compiler
npm ERR!   vue-template-compiler@"2.6.12" from the root project
npm ERR!   peer vue-template-compiler@"^2.x" from @vue/test-utils@1.1.3
npm ERR!   node_modules/@vue/test-utils
npm ERR!     dev @vue/test-utils@"^1.1.3" from the root project
npm ERR!   3 more (@nuxt/components, @nuxt/vue-app, @nuxt/webpack)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue-template-compiler@"2.5.x" from require-extension-hooks-vue@3.0.0
npm ERR! node_modules/require-extension-hooks-vue
npm ERR!   dev require-extension-hooks-vue@"^3.0.0" from the root project
npm ERR!

Если у кого-нибудь есть лучшее предложение, пожалуйста, дайте мне знать!

Ответ №1:

Похоже, что использование yarn вместо NPM устраняет эту проблему. Проблема, по-видимому, вызвана тем, что требуется расширение-крючки-vue, которое зависит от пользователя на 2.5.22. Смотрите этот выпуск для получения дополнительной информации.

Метки: , ,