npx create-nuxt-app followed by npm run dev throws Vue packages version mismatch

Question

I'm just getting started with Nuxt, so I ran npx create-nuxt-app my-app with the following parameters:

 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

When I run npm run dev , I get this error:

 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=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&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=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Here is what I've tried so far:

• npm audit fix --force
• npm clean cache --force
• Removing package-lock.json, node_modules and npm install

EDIT:

I've managed to fix this by including the following into my package dependencies:

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

Now I'm getting a warning though:

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.

It works, but it still feels like a workaround of some sort and I'm not sure I'm using the right versions of these packages anyway.

I've also tried upgrading them all up, but that didn't work:

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!

If anyone has a better suggestion, please let me know!

Answer 1

It looks like using yarn instead of NPM fixes this issue. The problem seems to be caused by require-extension-hooks-vue which has a peerDependency on 2.5.22. See this issue for more info.