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

[ivan-rivera]

First, I'm using node 15.2.1 but I've also tried this on 14.15.1 and 15.12.0. 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

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 (although it would be nice to have it fixed), but it looks like the default Nuxt app creation isn't working, at least on my machine.

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!

[danielroe]

@ivan-rivera This seems to be caused by require-extension-hooks-vue. Note that using yarn will also resolve this issue.

[ivan-rivera]

@danielroe thanks for looking into this! I can confirm that using yarn fixes the problem. I presume we still want Nuxt to work with NPM, so I'll leave this issue open for now. It'll also help others who run into the same problem.

[clarkdo]

This looks a new feature from npm v7 which will block install if there is conflict from upstream peer dependencies, we can use the option to retry with --force to bypass the conflict or --legacy-peer-deps to ignore peer dependencies entirely.

Looks require-extension-hooks-vue has not been updated for 2 years, so I may try to see if we can replace and remove it.

[nkawarewebuy]

Can confirm that this issue still exists on Nuxt version 2.15.7

I can get it working by adding --legacy-peer-deps but it would be nice if we have a proper solution,