Trying to find a solution to multiple Vue.JS Project Dependency Errors from the book Fullstack Vue: The Complete Guide to Vue.js

Question

I am receiving the following errors when I try to run a Vue.js calendar app on Vue3 from this tutorial here

https://github.com/zfhui/fullstack-vue/tree/master/02-calendar_app

I am running the following versions: npm 8.12.1 and node v16.15.1

I receive the following errors when I try to run it using npm install and/or npm run dev:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config production Use `--omit=dev` instead.
npm WARN config production Use `--omit=dev` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader@7.1.5
npm ERR! Found: webpack@5.73.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.72.1" from the root project
npm ERR!   peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest@1.1.1
npm ERR!   node_modules/@webpack-cli/configtest
npm ERR!     @webpack-cli/configtest@"^1.1.1" from webpack-cli@4.9.2
npm ERR!     node_modules/webpack-cli
npm ERR!       dev webpack-cli@"^4.9.2" from the root project
npm ERR!       3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR!   6 more (css-loader, terser-webpack-plugin, vue-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   dev babel-loader@"^7.1.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\NotAgainLarry\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\NotAgainLarry\AppData\Local\npm-cache\_logs\2022-06-03T06_24_14_414Z-debug-0.log

When I try to resolve the error by running npm audit fix --force, npm i or npm run dev, I get the following:

calendar-app@1.0.0 dev > cross-env NODE_ENV=development webpack-dev-server --open --hot [[100;90m..................[0m] - 
: [32;40mtiming[0m [35mconfig:load:flatten[0m Completed in 3ms[0m[K [..................]
 - : timing config:load:fla[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. 
- configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. 
Please strictly follow the order of the keywords in the pattern. 

How do I get rid of these errors? And what does it mean by 'Please strictly follow the order of the keywords in the patter'?

Answer 1

It's a problem caused by a change on NPM. You can read more about it here: https://github.com/npm/cli/issues/4998

Basically, the dependencies expected are not the ones npm is downloading.

How I fixed:

1. Pin your node version to 16.15.0 (you can do that with nvm )
2. Delete your node_modules and package-lock.json
3. npm install --legacy-peer-deps