create-nuxt-app
create-nuxt-app copied to clipboard
nuxt
npx create-nuxt-app followed by npm run dev throws Vue packages version mismatch
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:
- [email protected]
- [email protected]
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 --forcenpm 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 [email protected], 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: [email protected]
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/[email protected]
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 [email protected]
npm ERR! node_modules/require-extension-hooks-vue
npm ERR! dev require-extension-hooks-vue@"^3.0.0" from the root project
npm ERR!
@ivan-rivera This seems to be caused by require-extension-hooks-vue. Note that using yarn will also resolve this issue.
@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.
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.
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,
