NPM Angular ERR! peerInvalid / peerDependencies requirements - javascript

When running npm install on this package.json
{
"author": ", Inc.",
"name": "-angular2-template",
"version": "0.2.0",
"description": "Angular 2 Project Template. Webpack, ES6, Sass, Karma.",
"bugs": {
"url": "https://dev..net//-angular-template/issues"
},
"repository": {
"type": "git",
"url": "git#dev..net:/-angular-template.git"
},
"scripts": {
"start": "concurrently -k -r \"npm run webpack:w\" \"npm run sass:w\" \"npm run lite\"",
"build": "NODE_ENV='production' npm run webpack:b && npm run sass:b",
"webpack:b": "webpack",
"webpack:w": "webpack -w",
"sass": "node-sass --source-map true src/scss/index.scss build/styles.css",
"sass:b": "node-sass --output-style compressed src/scss/index.scss build/styles.css",
"sass:w": "npm run sass; node-sass --source-map true -w src/scss/index.scss build/styles.css",
"lite": "lite-server",
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/forms": "^0.3.0",
"#angular/http": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.1",
"#angular/upgrade": "2.0.0-rc.4",
"angular2-cookie": "^1.2.2",
"bootstrap": "^3.3.7",
"firebase": "^3.3.0",
"js-data": "^3.0.0-rc.2",
"js-data-http": "^3.0.0-beta.8",
"lodash": "^4.6.1",
"ng2-bootstrap": "^1.0.24",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"tslint": "^3.13.0",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"autoprefixer": "^6.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-register": "^6.9.0",
"browser-sync-webpack-plugin": "^1.1.0",
"codelyzer": "0.0.25",
"concurrently": "^2.0.0",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-jasmine": "^0.3.8",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"lite-server": "^2.2.0",
"node-sass": "^3.4.2",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"postcss": "^5.0.21",
"postcss-loader": "^0.9.1",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint-eslint-rules": "^1.3.0",
"tslint-loader": "^2.1.5",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"webpack": "^1.13.0"
}
}
I get the following errors..
typings WARN deprecated 8/18/2016: "registry:dt/node#4.0.0+20160509154515" is deprecated (updated, replaced or removed)
typings WARN deprecated 7/25/2016: "registry:dt/core-js#0.0.0+20160317120654" is deprecated (updated, replaced or removed)
typings WARN deprecated 6/21/2016: "registry:dt/jasmine#2.2.0+20160505161446" is deprecated (updated, replaced or removed)
typings WARN deprecated 7/24/2016: "registry:dt/webpack#1.12.9+20160523035535" is deprecated (updated, replaced or removed)
├── core-js (global)
├── jasmine (global)
├── moment (global)
├── node (global)
├── source-map (global)
├── uglify-js (global)
└── webpack (global)
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\angularfire2 requires #angular/common#'^2.0.0-rc.5' but will load
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\#angular\common,
npm WARN unmet dependency which is version 2.0.0-rc.4
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\angularfire2 requires #angular/compiler#'^2.0.0-rc.5' but will load
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\#angular\compiler,
npm WARN unmet dependency which is version 2.0.0-rc.4
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\angularfire2 requires #angular/core#'^2.0.0-rc.5' but will load
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\#angular\core,
npm WARN unmet dependency which is version 2.0.0-rc.4
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\angularfire2 requires #angular/platform-browser#'^2.0.0-rc.5' but will load
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\#angular\platform-browser,
npm WARN unmet dependency which is version 2.0.0-rc.4
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\angularfire2 requires #angular/platform-browser-dynamic#'^2.0.0-rc.5' but will load
npm WARN unmet dependency C:\Users\Modal\ng2-crm-revamp\node_modules\#angular\platform-browser-dynamic,
npm WARN unmet dependency which is version 2.0.0-rc.4
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.5.0
npm ERR! npm v2.15.9
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package #angular/common#2.0.0-rc.4 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer #angular/platform-browser#2.0.0-rc.4 wants #angular/common#^2.0.0-rc.4
npm ERR! peerinvalid Peer #angular/platform-browser-dynamic#2.0.0-rc.4 wants #angular/common#^2.0.0-rc.4
npm ERR! peerinvalid Peer #angular/forms#0.3.0 wants #angular/common#^2.0.0-rc.5
npm ERR! peerinvalid Peer #angular/router#3.0.0-beta.1 wants #angular/common#^2.0.0-rc.4
npm ERR! peerinvalid Peer ng2-bootstrap#1.0.24 wants #angular/common#2.0.0-rc.4
I've tried a fresh npm install. I've tried running npm install npm -g and I've tried clearing out node_modulesboth globally and in appdata. I've Googled around and found next to nothing. Perhaps it's because my Googling is bad. Or perhaps because there's actually nothing to find. I'm not sure. But I'm flustered and this feels like the time to make my first Stackoverflow post, although it definitely feels more like a plea than anything.

It's clearly telling you what's wrong. You are installing some angular2 with the latest release and some from previous version and that's why you are getting good this error. Try to install all the latest or only previous version.

Install Latest version nodejs (nodejs.org). try again. npm install

Related

node error with typescript version while installing tippy.js

When I try to npm install tippy.js I get this error back:
$ npm i tippy.js
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: awesome-typescript-loader#5.2.1
npm ERR! Found: typescript#4.2.3
npm ERR! node_modules/typescript
npm ERR! dev typescript#"^4.1.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript#"^2.7 || ^3" from awesome-typescript-loader#5.2.1
npm ERR! node_modules/awesome-typescript-loader
npm ERR! dev awesome-typescript-loader#"^5.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript#3.9.10
npm ERR! node_modules/typescript
npm ERR! peer typescript#"^2.7 || ^3" from awesome-typescript-loader#5.2.1
npm ERR! node_modules/awesome-typescript-loader
npm ERR! dev awesome-typescript-loader#"^5.2.1" 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\tlege\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
here is my json file for versions:
{
"name": "#flowstorm/bot-ui",
"version": "0.2.1",
"main": "app.bundle.js",
"author": "PromethistAI",
"license": "MIT",
"private": false,
"scripts": {
"start": "webpack serve --hot --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
"build:npm": "webpack --config webpack.npm.js && cd ./dist && npm pack"
},
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#types/ramda": "^0.27.17",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"babel-plugin-ramda": "^2.0.0",
"clean-webpack-plugin": "^3.0.0",
"copy-pkg-json-webpack-plugin": "^0.0.39",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-inject-attributes-plugin": "1.0.6",
"html-webpack-plugin": "^4.4.1",
"mini-css-extract-plugin": "^0.11.1",
"node-sass": "^4.14.1",
"node-sass-glob-importer": "^5.3.2",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.0.1",
"postcss-preset-env": "^6.7.0",
"remove-files-webpack-plugin": "^1.4.4",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"source-map-loader": "^1.1.0",
"style-loader": "^1.2.1",
"typescript": "^4.1.5",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.1.4"
},
"dependencies": {
"#babel/polyfill": "7.12.1",
"core-js": "3.6.5",
"fast-average-color": "6.3.0",
"hls.js": "0.14.17",
"ramda": "0.27.1"
}
}
I am guessing it has something to do with some version of typescript but I am new to version control so could you please help me solve this problem? If you need me to provide more information please ask for it.

How to fix dependency conflict in JavaScript project template?

I am working with a the Airframe React template and the steps are pretty straightforward: Unzip and run npm install from the project directory. The problem is that I get the following error when I run npm install:
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: airframe-dashboard#0.1.0
npm ERR! Found: eslint#6.8.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"^6.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#"^4.19.1 || ^5.3.0" from eslint-config-airbnb#17.1.1
npm ERR! node_modules/eslint-config-airbnb
npm ERR! dev eslint-config-airbnb#"^17.1.0" 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\leord\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\leord\AppData\Local\npm-cache\_logs\2022-06-15T05_07_36_689Z-debug-0.log
I tried using --legacy-peer-deps, or changing the entry "devDependencies.eslint" to "*" and to "^5.3.0" in the package.json file, but now it runs with the following error:
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\leord\AppData\Local\npm-cache\_logs\2022-06-15T05_11_22_330Z-debug-0.log
I also tried reinstalling Node and npm. What I find weird is that I haven't changed anything in the project and I can't run it.
I have tried it from both Windows 11 and WSL2. My IDE is WebStorm and everything is up to date.
The complete (original) package.json file has the following dependencies:
{
"name": "airframe-dashboard",
"version": "0.1.0",
"description": "Seed project for flexible light React/Bootstrap 4 dashboards.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run start:dev",
"build:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.dev.js",
"build:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack --config ./build/webpack.config.client.prod.js",
"start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.dev.js",
"start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js"
},
"author": "Webkom",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"autoprefixer": "^9.6.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"babel-plugin-universal-import": "^4.0.0",
"circular-dependency-plugin": "^5.0.2",
"commander": "^2.20.0",
"css-loader": "^3.1.0",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"extract-css-chunks-webpack-plugin": "^4.5.2",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.0.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#owczar/dashboard-style--airframe": "^0.1.13",
"ag-grid-community": "^21.0.1",
"ag-grid-react": "^21.0.1",
"bootstrap": "^4.3.1",
"faker": "^4.1.0",
"font-awesome": "^4.7.0",
"holderjs": "^2.9.6",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"node-fetch": "^2.6.0",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"query-string": "^6.7.0",
"rc-slider": "^8.6.13",
"react": "^16.8.6",
"react-beautiful-dnd": "^11.0.4",
"react-big-calendar": "^0.22.0",
"react-bootstrap-table-next": "^3.1.4",
"react-bootstrap-table2-editor": "^1.2.4",
"react-bootstrap-table2-filter": "^1.1.9",
"react-bootstrap-table2-paginator": "^2.0.6",
"react-bootstrap-table2-toolkit": "^2.0.1",
"react-bootstrap-typeahead": "^4.0.0-alpha.9",
"react-datepicker": "^2.7.0",
"react-dom": "^16.8.6",
"react-dropzone": "^10.1.5",
"react-grid-layout": "^0.16.6",
"react-helmet": "^5.2.1",
"react-hot-loader": "^4.11.0",
"react-image-crop": "^8.0.2",
"react-quill": "^1.3.3",
"react-responsive": "^7.0.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-text-mask": "^5.4.3",
"react-toastify": "^5.2.1",
"react-toggle": "^4.0.2",
"react-universal-component": "^4.0.0",
"reactstrap": "^8.0.0",
"recharts": "^1.6.2",
"text-mask-addons": "^3.8.0",
"uuid": "^3.3.2",
"webpack-cli": "^3.1.0",
"webpack-flush-chunks": "^2.0.3"
}
}
How can I resolve the dependency conflict?
UPDATE:
Turns out I did not have Git installed. After installing it, trying npm install in the project's root folder gives me the following error:
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://git#github.com/Marak/faker.js.git
npm ERR! Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
npm ERR! git#github.com: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\leord\AppData\Local\npm-cache\_logs\2022-06-15T07_03_08_129Z-debug-0.log
Why do I need access to that git repo?
Try using --force.
What is ur node/npm version?

make: *** [Release/obj.target/binding/src/binding.o] Error 1 when using dart sass

Because the node-sass was no longer maintain and did no compatiable with the higher version of node, so I tried to change the node-sass to dart-sass, when I use the dart-sass in the vue project like this:
"sass": "1.48.0",
shows error:
npm ERR! /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:710:50: note: 'remove_cv' declared here
npm ERR! template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
npm ERR! ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 21.1.0
npm ERR! gyp ERR! command "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node" "/Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/xiaoqiangjiang/source/reddwarf/frontend/crx-selection-translate/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xiaoqiangjiang/.npm/_logs/2022-01-15T11_36_53_164Z-debug.log
why did this happen? what should I do fix this problem? This is my project package.json:
{
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/crx-selection-translate.git"
},
"scripts": {
"xpostinstall": "node ./build/install-pdf-viewer",
"dev": "webpack --config build/webpack.dev.config.js",
"build": "gulp --cwd . --gulpfile build/gulp-build.js",
"test": "karma start build/karma.config.js"
},
"dependencies": {
"bootstrap-sass": "^3.4.1",
"chrome-call": "^1.0.2",
"connect.io": "^3.1.3",
"interact.js": "^1.2.6",
"js-wheel": "git+https://github.com/jiangxiaoqiang/js-wheel.git",
"translation.js": "git+https://github.com/jiangxiaoqiang/translation.js.git",
"vue": "^1.0.24",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"chrome-env": "^0.0.6",
"css-loader": "^0.23.1",
"del": "^2.2.0",
"download": "^5.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"fs-extra": "^8.1.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-htmlmin": "^2.0.0",
"gulp-jsonmin": "^1.2.0",
"gulp-uglify": "^1.5.3",
"gulp-zip": "^3.2.0",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.99.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.1.2",
"karma-coveralls": "^1.2.1",
"karma-firefox-launcher": "^1.3.0",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.6",
"raw-loader": "^0.5.1",
"sass": "1.48.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.2.0",
"webpack": "^1.13.1"
},
"author": "Jiangxiaoqiang <jiangtingqiang#gmail.com>",
"license": "GPLv3",
"bugs": {
"url": "https://github.com/jiangxiaoqiang/crx-selection-translate/issues"
},
"homepage": "https://github.com/jiangxiaoqiang/crx-selection-translate#readme"
}
the node version is 16 and the os was macOS moteney with M1 chip.
Not sure if this is the same issue but I was able to fix the installation by using the following commands:
rm -rf node_modules
rm yarn.lock
yarn install -std=c++17
Found the answer with an explanation here
Additional troubleshooting I ran into that unrelated to this exact question:
If unable to load external module #babel/register make sure that both babel-core and babel-register are installed as well as the gulp-cli: yarn global add gulp-cli.
If using node-sass and receiving the following error:
Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (108)
remove node-sass and use dart-sass:
npm uninstall gulp-sass
npm uninstall gulp-sass-lint
npm i gulp-dart-sass
I had the same issue on my Mac M1. In my case, sass and node versions were not matching. I had to downgrade node from 16.x to 12.x. I guess, if that is possible upgrading sass should also work, but I never did that.
Command Line DartSass for Mac m1
First of all install the missing packages at https://brew.sh/
Copy this:/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
After: npm i -d sass
after a careful research it seems that m1 is missing many packages to make dart sass work for this reason everything that is missing must be installed with the line written above.

cannot install $ npm i mini-css-extract-plugin. What could be the problem?

This is the ERROR. I use visual studio code with gitBash.
$ npm i mini-css-extract-plugin
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: lesson-54-intro-webpack#1.0.0
npm ERR! Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! dev webpack#"^4.39.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.0.0" from mini-css-extract-plugin#2.2.0
npm ERR! node_modules/mini-css-extract-plugin
npm ERR! mini-css-extract-plugin#"*" 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\Smith\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\Smith\AppData\Local\npm-cache\_logs\2021-08-19T13_12_04_740Z-debug.log
This is my package JSON file. What could be wrong here?
How to match versions?
{
"name": "lesson-54-intro-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"axios": "^0.19.0"
}
}
See the edit below.
As the error says the webpack version not matched try either:
upgrade lesson-54-intro-webpack package
downgrade mini-css-extract-plugin
Edit: based on your package.json content
You need to upgrade your webpack version to version 5

Error after installing Node 6, npm ERR! Invalid Version: 1.0.5beta

I am using npm version 3.8.6.
I installed the latest Nodejs version, and did this
MacBook-Pro-de-MarceloRS:promo-mobile-ccsearchlp7a Marcelo$ rm -rf node_modules/; npm install
npm WARN deprecated gulp-foreach#0.1.0: Either use gulp-tap or gulp-flatmap, depending on your needs
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v6.0.0
npm ERR! npm v3.8.6
npm ERR! Invalid Version: 1.0.5beta
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! /Users/Marcelo/Documents/Projects/BankOfAmericaApps/promo-mobile-ccsearchlp7a/npm-debug.log
MacBook-Pro-de-MarceloRS:promo-mobile-ccsearchlp7a Marcelo$ npm -v
3.8.6
Why do you think it is ?
I am using OSX El Capitan.
EDIT
Here is my package.json
{
"name": "promo-mobile-ccsearchlp7a",
"app": "app",
"dist": "dist",
"version": "2.0.0",
"private": true,
"dependencies": {
"assemble": "~0.9.1",
"browser-sync": "~2.11.1",
"del": "~2.2.0",
"engine-handlebars": "^0.8.0",
"get-value": "~2.0.3",
"gulp": "~3.9.1",
"gulp-autoprefixer": "~3.1.0",
"gulp-cssnano": "~2.1.1",
"gulp-eslint": "~2.0.0",
"gulp-extname": "~0.2.2",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-foreach": "~0.1.0",
"gulp-imagemin": "~2.4.0",
"gulp-load-plugins": "~1.2.0",
"gulp-notify": "~2.2.0",
"gulp-plumber": "~1.1.0",
"gulp-sass": "~2.2.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.5.2",
"gulp-usemin": "~0.3.20",
"gulp-util": "~3.0.7",
"handlebars-helpers": "github:assemble/handlebars-helpers#dev",
"main-bower-files": "~2.9.0",
"multimatch": "~2.1.0",
"run-sequence": "~1.1.5"
},
"engines": {
"node": ">=0.12.2"
},
"devDependencies": {
"git-guppy": "~1.1.0",
"gulp-watch": "~4.3.5"
},
"scripts": {
"postinstall": "bower install"
}
}
Mine installed fine. But I note the following:
I installed under Node V5.
You are using Node V6.
I got the following notices:
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated graceful-fs#1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
You need to update you package.json to fetch lodash v4 and graceful-fs v4
(easiest method for me is to remove these two lines from package.json and npm --save install package install the two again

Categories

Resources