Conflicting peer dependency: webpack#4.46.0 npm ERR! node_modules/webpack - javascript

I cloned one repository from github then installed npm packages using npm install, but I get this error
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/composition-api": "^1.0.0-rc.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1",
"less-loader": "^8.0.0",
"node-sass": "^5.0.0",
"sass": "^1.32.6",
"sass-loader": "^7.3.1",
"url-loader": "^4.1.1",
"vue-template-compiler": "^2.6.11"
},
How can I get rid of this problem?

I have found this issue from my project which I built last two weeks. Now, this month (May 2021) sass-lang says LibSass and Node Sass are deprecated
try this commands-
yarn remove node-sass
yarn add sass
or npm commands

Related

dotenv: command not found in nestjs project

I am working on a NestJS project. I am trying to start project but I am getting error: dotenv: command not found in the terminal. I have checked the packages.json and I can see to dotenv installed. Moreover I have tried to install dotenv with Yarn but still I am getting same error.
Dependencies in package.json:
"dependencies": {
"#nestjs/common": "^8.1.1",
"#nestjs/config": "1.0.2",
"#nestjs/core": "^8.1.1",
"#nestjs/jwt": "^8.0.0",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.1.1",
"#nestjs/swagger": "^5.1.2",
"#prisma/client": "3.3.0",
"bcrypt": "^5.0.1",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
-> "dotenv": "^10.0.0",
"express-rate-limit": "^5.5.0",
"helmet": "^4.6.0",
"nanoid": "^3.1.30",
"nodemailer": "^6.7.0",
"passport": "^0.5.0",
"passport-jwt": "^4.0.0",
"reflect-metadata": "^0.1.12",
"request-ip": "^2.1.3",
"rimraf": "^3.0.2",
"rxjs": "^7.4.0",
"swagger-ui-express": "^4.1.4"
},
The starting script that I am using:
"start:dev": "dotenv -e env/local.env -- nest start --watch",
I found the solution and it may help someone else. To run dotenv command in terminal we need dotenv-cli. Installing dotenv-cli with yarn add dotenv-cli solved my problem.

Error while running npm install on angular project

Here's the package.json file:
{
"dependencies": {
"#angular/animations": "^9.1.3",
"#angular/cdk": "^11.1.1",
"#angular/common": "^9.1.3",
"#angular/compiler": "^9.1.3",
"#angular/core": "^9.1.3",
"#angular/forms": "^9.1.3",
"#angular/http": "^7.2.15",
"#angular/localize": "^9.1.3",
"#angular/platform-browser": "^9.1.3",
"#angular/platform-browser-dynamic": "^9.1.3",
"#angular/platform-server": "^9.1.3",
"#angular/router": "^9.1.3",
"#angular/service-worker": "^9.1.3",
"#fortawesome/fontawesome-free-webfonts": "^1.0.9",
"#kolkov/angular-editor": "^1.1.5",
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"#ng-select/ng-select": "^4.0.0",
"#ngrx/store": "^9.1.0",
"#ngx-rocket/scripts": "4.0.0",
"#ngx-translate/core": "^12.1.2",
"#pioneer-code/pioneer-tree": "^2.1.0",
"#types/async": "^3.0.3",
"#types/d3": "^5.7.2",
"angular-fusioncharts": "3.0.4",
"angular-tree-component": "8.5.6",
"async": "^3.1.0",
"bootstrap": "^4.4.1",
"core-js": "^3.5.0",
"d3": "^5.16.0",
"david": "^12.0.0",
"deep-object-diff": "^1.1.0",
"fusioncharts": "3.15.3",
"fusionmaps": "^3.15.3",
"html2canvas": "^1.0.0-rc.5",
"lodash": "^4.17.15",
"ng-drag-drop": "^5.0.0",
"ng2-dragula": "^2.1.1",
"ngx-bar-rating": "^1.1.0",
"ngx-bootstrap": "^5.2.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^9.1.0",
"ngx-doc-viewer": "^1.1.0",
"ngx-drag-drop": "^2.0.0",
"ngx-export-as": "^1.4.2",
"ngx-freshchat": "^0.2.0",
"ngx-infinite-scroll": "^8.0.1",
"ngx-joyride": "^2.2.11",
"ngx-quill": "^12.0.1",
"ngx-take-until-destroy": "^5.4.0",
"ngx-toastr": "^12.0.1",
"ngx-toggle-switch": "^2.0.5",
"ngx-zone-scheduler": "^2.2.1",
"node-sass": "^4.14.0",
"quill": "^1.3.7",
"rxjs": "^6.5.5",
"socket.io-client": "^3.0.4",
"tslib": "^1.10.0",
"underscore": "^1.10.2",
"uuid": "^7.0.3",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.901.3",
"#angular/cli": "^9.1.6",
"#angular/compiler-cli": "^9.1.7",
"#angular/language-service": "^9.1.3",
"#biesbjerg/ngx-translate-extract": "^6.0.4",
"#ngrx/store-devtools": "^9.1.0",
"#ngx-rocket/scripts": "^4.0.0",
"#types/file-saver": "^2.0.1",
"#types/jasmine": "^3.5.10",
"#types/jasminewd2": "^2.0.8",
"#types/lodash": "4.14.157",
"#types/node": "^13.13.4",
"#types/underscore": "^1.9.4",
"#types/uuid": "^7.0.3",
"chalk": "^4.0.0",
"codelyzer": "^5.1.2",
"copyfiles": "^2.1.1",
"cpy": "^8.0.0",
"file-saver": "^2.0.2",
"hads": "^2.0.1",
"htmlhint": "^0.11.0",
"https-proxy-agent": "^5.0.0",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "^5.0.2",
"karma": "^5.0.1",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "^3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"karma-junit-reporter": "^2.0.1",
"ng-packagr": "^9.0.0",
"protractor": "^5.4.3",
"puppeteer": "^3.0.1",
"rxjs-tslint": "^0.1.7",
"stylelint": "^13.3.3",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.17.1",
"ts-node": "^8.9.1",
"tslint": "^6.1.1",
"typescript": "~3.8.3",
"webpack": "^4.43.0"
},
"peerDependencies": {
"mobx": "5.15.1",
"mobx-angular": "3.0.3"
}
}
When running npm install i got the following error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: bloom#1.0.0
npm ERR! Found: #angular/common#9.1.13
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"^9.1.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#"^11.0.0 || ^12.0.0-0" from #angular/cdk#11.2.13
npm ERR! node_modules/#angular/cdk
npm ERR! #angular/cdk#"^11.1.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 /Users/ayoubkhial/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ayoubkhial/.npm/_logs/2021-07-12T23_35_44_624Z-debug.log
And when running the following command npm install --force i got this error:
You have "#angular/cdk": "^11.1.1" looking for #angular/common#"^11.0.0 || ^12.0.0-0" but your package.json has "#angular/common": "^9.1.3"
From the error message here,
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#"^11.0.0 || ^12.0.0-0" from #angular/cdk#11.2.13
npm ERR! node_modules/#angular/cdk
npm ERR! #angular/cdk#"^11.1.1" from the root project
I recommend syncing up your angular packages so that they are on the same version. This could mean either upgrading all the #angular packages to v11 or downgrading the cdk to v9.
In some cases you can use --force or --legacy-peer-deps to tell the installation to either ignore certain peer dependencies or use legacy dependencies but since your mismatch is between core angular packages I wouldn't recommend that approach here.
I fixed it by deleting node_modules, package-lock.json directly from project directory. Clean cache by running command npm cache clean --force. Now try npm i.

eslint – how to know where a rule is "defined"

Given a project with its node's package.json installing eslint and a few plugins, how can I know where a particular rule is set?
I see a rule being applied (space-before-function-paren) but I cannot find it either in any of the .eslintrc files in the project, or in the documentation of the plugins.
Additionally, I'm working with VSCode with some extensions such as ESLint itself, which could potentially be interfering here, but again I'm not sure how/where to check which part is applying that rule (though I think this is unlikely to be happening, as npm run lint fails if the code fails against the mentioned rule.
I'm posting the relevant parts of the package.json file:
{
// ...
"scripts": {
"watch": "NODE_ENV=development node build/build.js --watch",
"build": "NODE_ENV=development node build/build.js",
"build:prod": "NODE_ENV=production node build/build.js",
"unit": "NODE_ENV=test jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"ci-lint": "eslint --ext .js,.vue src test/unit/specs --format checkstyle --output-file lint_out/unit_timeline.xml"
},
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.27",
"autoprefixer": "^8.2.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.4",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.3.2",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^5.10.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.1.0",
"jest": "^22.4.3",
"jest-junit": "^3.6.0",
"jest-serializer-vue": "^1.0.0",
"node-notifier": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^2.0.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.3",
"postcss-url": "^7.3.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"semver": "^5.5.0",
"shelljs": "^0.8.1",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^1.0.1",
"vue-jest": "^2.3.0",
"vue-loader": "^14.2.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.21",
"webpack": "^3.11.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-file-list-plugin": "0.0.6",
"webpack-merge": "^4.1.2",
"yargs": "^11.0.0"
}
// ...
}
Unfortunately, it seems there's no "eslint" way to perform such a report.
If you run eslint with debug options, you get a lot of information about how the program runs: what file is processing, with which configuration, how it fails, etc., but not from where a rule was taken.
I managed to find it by simply running a grep + find within the node_modules directory, and being sure which module was providing the rule by simply changing it and seeing the eslint results afterwards.

Error trying to install DanfoJs, The Node.js native addon module (tfjs_binding.node) can not be found at path

I am trying to install DanfoJS on windows 10 using below command:
npm install danfojs-node
but I get following error when I run npm start
Error: The Node.js native addon module (tfjs_binding.node) can not be found at path:
I tried to ran npm rebuild #tensorflow/tfjs-node build-addon-from-source but still having problem.
and here is the package.json
"devDependencies": {
"babel-polyfill": "^6.26.0",
"electron": "^10.1.0",
"electron-packager": "^13.1.1"
},
"dependencies": {
"#tensorflow/tfjs-node": "^2.3.0",
"#tensorflow/tfjs-node-gpu": "^2.3.0",
"body-parser": "^1.18.3",
"danfojs-node": "^0.1.4",
"electron-log": "^3.0.6",
"express": "^4.16.4",
"local-devices": "^2.0.0",
"node-thermal-printer": "^4.1.0",
"react-select": "^3.1.0",
"regenerator-runtime": "^0.13.5",
"ws": "^7.2.0",
"xml2js": "^0.4.22",
"xpath": "0.0.27",
"yargs": "^14.0.0"
},
I was using a different node.js version that Electron was. so I installed node.js version is the same as the version of Electron is using (12.16.3) and that solved the problem

babel-loader#7.1.2 requires a peer of webpack#2 || 3 but none was installed

I am having this issue while installing all node_modules. And this is making me crazy.
babel-loader#7.1.2 requires a peer of webpack#2 || 3 but none was
installed.
Here is my package.json file
{
"name": "react-router-firebase-auth",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-scripts": "0.9.5"
},
"dependencies": {
"#atlaskit/button": "3.0.0",
"#atlaskit/css-reset": "1.1.4",
"#atlaskit/field-text": "4.0.1",
"#atlaskit/modal-dialog": "2.1.1",
"#atlaskit/page": "4.0.1",
"#atlaskit/util-shared-styles": "2.3.1",
"#shopify/polaris": "^1.5.1",
"babel-eslint": "^7.0.0",
"bootstrap": "^3.3.7",
"eslint": "3.16.1",
"eslint-plugin-react": "6.4.1",
"express": "^4.16.1",
"firebase": "^4.5.0",
"firebase-admin": "^5.4.1",
"firestore": "^1.1.6",
"fixed-data-table": "^0.6.4",
"griddle-react": "^1.8.1",
"jquery": "^3.2.1",
"node-localstorage": "^1.3.0",
"nodemon": "^1.12.1",
"react": "^15.5.3",
"react-bootstrap": "^0.31.3",
"react-bootstrap-button-loader": "^1.0.8",
"react-bootstrap-navbar": "^1.1.0",
"react-data-grid": "^2.0.59",
"react-date-picker": "^6.1.2",
"react-dom": "^15.5.3",
"react-fontawesome": "^1.6.1",
"react-router-dom": "^4.0.0-beta.8",
"react-scripts": "^0.9.5",
"react-transition-group": "^1.2.0",
"reactstrap": "^4.8.0",
"requestify": "^0.2.5",
"simple-react-bootstrap": "^0.2.7",
"styled-components": "1.4.6",
"url": "^0.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I am using create-react-app for this project. So i could not change webpack.config.js file. What am i supposed to do here?
Please read this post. It describes what a peer dependency is.
https://stackoverflow.com/a/34645112/2379376
What that means is that you have webpack not installed at all or you have a different version (webpack 1.x) installed. But this plugin needs webpack in version 2 or 3 to function properly.
What you can do is
npm install webpack -g
So npm will install the newest version of webpack on your system.
But now other peer warnings could occur when other loaders need an older version of webpack.
When using Webpack 4:
I've faced the same error but I actually had the webpack 4 installed. In order to solve this I used the instruction on babel-loader documentation and installed the following extra libraries: babel-loader, #babel/core and #babel/preset-env.
Command to install all the required libraries:
npm install -D babel-loader #babel/core #babel/preset-env webpack
package.json devDependencies before the installation:
"devDependencies": {
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
After the installation:
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"chai": "^4.1.2",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"expect": "^22.0.3",
"jest-junit": "^3.3.0",
"jest-junit-reporter": "^1.1.0",
"node-sass": "^4.9.2",
"prop-types": "^15.6.0",
"react-test-renderer": "^16.2.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
Hope it helps
Install webpack globally in node environment as well as in development(as dev dependency).
As main function of webpack is to bundle JavaScript files for usage in a browser.As each time you made changes to index.js (entry point of npm) at development time then you have to run webpack to make changes in bundle.js file also, so we need to install in both the environment(ie. node environment and development environment)
Run below command to solve the issue:
npm install -g webpack#3.10.0
npm install --save-dev webpack#3.10.0
Here I am using 3.10.0 for webpack. You can use 4 as well. I think this will help.

Categories