Automatic npm install --legacy-peer-deps for a single dependency - npm

Assume I have a package.json like this:
{
"name": "my-app",
"version": "0.1.0",
"dependencies": {
"#aws-sdk/client-s3": "^3.21.0",
"#testing-library/react": "^11.2.5",
"axios": "^0.22.0",
"credit-card-type": "^8.3.0",
"csstype": "^3.0.8",
"dayjs": "^1.10.4",
"lodash": "^4.17.20",
"mathjax-full": "^3.2.0",
"mathjax-react": "^1.0.6",
"react": "^17.0.2",
},
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The problem is that the dependency mathjax-react & mathjax-full need react#"^15.0.0 || ^16.0.0". I have tested with npm i --force and npm i --legacy-peer-deps and It all seems to work fine with my react version which is react#17.0.2.
I wouldn't like to run npm i --force and npm i --legacy-peer-deps every time i need to install the dependencies, So I was looking for a way to automatically do that only for the mathjax-react & mathjax-full whenever I run npm i. I tried looking in the .npmrc docs and this reference, but could not find a way to do that. What might be a solution for this? Is there a native npm solution for this? Or do i have to write a script that reads my package.json and runs npm install for every dependency alone?
My reasoning is that if i need to install some other dependencies that have conflicts, I'd never be warned about it.

Legacy peer dependencies aren't per-package, they apply to the project as a whole. It's just that you might need it for your whole project to keep only one or two dependencies happy. You'll find if you install a package with --legacy-peer-deps and then install a different package without that flag, npm will complain about the first package again. So once you need --legacy-peer-deps, you need to specify it always no matter what package you install.
According to the docs, you can set it permanently with:
npm config set legacy-peer-deps=true --location=project
This just adds legacy-peer-deps=true to the end of the .npmrc in your project root.

Related

Multiple vulnerabilities in new CRA app , but the suggested "npm fix" is questionable

I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.
As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.
After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).
These warnings are false positives. There are no actual vulnerabilities affecting your app here.
To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.
I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
}
At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.
The breaking changes were this pretty much :
PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.
Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :
npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.
It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .
My Node version is : 16.13.1
My NPM version is : 8.1.2
I dont have CRA installed globally.
My Package.json :
{
"name": "project-a",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/css": "^11.5.0",
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
You can use npm >8.3.0 with the overrides feature.
Just add to package.json:
...
"overrides": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
...

`npm audit --production` still warns of vulnerabilities despite moving package to `devDependencies`

I created a react app with npx create-react-app myapp and was flooded with vulnerabilities. I followed the instructions in this github issue and moved the package to devDependencies in my package.json file, since any "vulnerabilies" would only exist on my local dev laptop. However, when I run npm audit --production as suggested, I still see the deluge of warnings about vulnerabilities. Did I forget to do something? Here is my package.json file.
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"web-vitals": "^1.1.2"
},
"devDependencies": {
"react-scripts": "4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And these are the vulnerabilities I am seeing for react-scripts
tpulliam#lappy:~/Desktop/code/myapp (master) $ npm audit --production
# npm audit report
ansi-html *
Severity: high
Uncontrolled Resource Consumption in ansi-html - https://github.com/advisories/GHSA-whgm-jr23-g3j9
fix available via `npm audit fix --force`
Will install react-scripts#0.9.5, which is a breaking change
node_modules/ansi-html
#pmmmwh/react-refresh-webpack-plugin <=0.5.0-rc.6
Depends on vulnerable versions of ansi-html
Depends on vulnerable versions of webpack-dev-server
node_modules/#pmmmwh/react-refresh-webpack-plugin
react-scripts >=0.10.0-alpha.328cb32e
Depends on vulnerable versions of #pmmmwh/react-refresh-webpack-plugin
Depends on vulnerable versions of #svgr/webpack
Depends on vulnerable versions of babel-jest
...
...
So I actually fixed my issue. All I did was
rm -fr node_modules/ package-lock.json && npm install after modifying the package.json file.
After that, npm audit --production showed 0 vulnerabilities.

Ignore peer dependency check for single package in package.json

I try to exclude the package react-virtualized from the peer dependency checking of NPM 7. I know I could separately install that package with
npm install react-virtualized --legacy-peer-deps
...but my goal is to install all packages with npm install and this one shall not be checked for peer dependencies. Is that possible?
I would accept any answer that shows me how to manipulate the package.json so that a fresh npm install runs without peer dependency errors.
I have the following package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-device-detect": "^1.11.14",
"react-markdown": "^7.0.0",
"react-resize-detector": "^6.7.1",
"react-virtualized": "^9.22.3"
}
}
There isn't a way to do that within your own package.json as far as I am aware. The change would need to happen in the package.json for the react-virtualized package. Perhaps one of these alternatives will work for you:
Set legacy-peer-deps in a .npmrc file for your project. This won't work if people are installing your project via npm but if your project is cloned from a git repository or otherwise downloaded, and then people run npm install from there, including a .npmrc in the project should work.
Require using npm#6 which will be more lenient about peer dependency checks. You can specify the npm version in the "engines" field in your package.json.
Install react-virtualized from GitHub. The master branch (and, as of this writing, unfortunately only the master branch) has the d36509817ac44 commit which added react#17 and react-dom#17 as acceptable peer dependencies. Because this code is not in any release yet, you may be getting a version of the module that is unstable. To do this: npm install git+https://github.com/bvaughn/react-virtualized.git
Use react#16 and react-dom#16 instead of #17 for each.
With npm#>=8.3.0 use overrides in package.json:
"overrides": {
"react-virtualized": {
"react": "$react",
"react-dom": "$react-dom"
}
}
See https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

npm can't find dependencies for some react-native modules

I'm creating a react native app using create-react-native-app
npm create-react-native-app
I updated react-native version to 0.44.0, which requires to update react version to 16.0.0-alpha.6
This is my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "0.0.29",
"jest-expo": "^0.4.0",
"react-test-renderer": "~15.5.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/ex-navigation": "^2.11.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^16.0.0",
"react": "~16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
Running npm install gives me following errors
C:\dev\repo\test>npm install
npm WARN lottie-react-native#1.1.1 requires a peer of react#>=15.3.1 but none was installed.
npm WARN react-native-maps#0.12.2 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-native-svg#4.4.1 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-static-container#1.0.1 requires a peer of react#^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.
It looks like react version 16.0.0-alpha.6 is not recognized by lottie-react-native, react-native-maps, react-native-svg, and react-static-container. I'm not sure if major version (15) must be met, or the alpha version 16 is not picked up by those libraries, or something else. Does anyone know how to fix this? Thanks.
I have a similar problem, actually right now I get this problem, whenever I try to create a new application with create-react-native-app.
The only solution (hack) I have found right now is:
Delete node_modules (for me it's not enough to just do npm install)
Do npm install
I just solve the same issue by removing the react-native folder in node_modules and reinstall the react-native by run this command
Delete the react-native folder in node_modules
Reinstall react-native by run npm install react-native
I think is more simply than deleting the entire node_modules as only the react-native packages and its package.json is missing.

How do I configure npm packages using a package list? Like Bower

I'm a big fan of bower. I don't need to put a stack of packages in my repository, I just commit bower.json each time and I'm done.
So my question really is, can I make npm read from a json file in the same way that bower does?
npm has package.json. This file has dependencies and devDependencies parts. You can use this file similar to bower.json.
npm install
will install necessary dependencies to your project's node_modules directory.
See sample package.json below.
{
"name": "SampleMobileApp",
"version": "0.0.1",
"description": "Sample App",
"dependencies": {
"grunt": "~0.4.2",
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.8.0",
"grunt-open": "~0.2.3",
"grunt-contrib-copy": "~0.5.0",
"grunt-bowercopy": "~0.7.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-phonegap": "~0.12.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"grunt",
"javascript"
],
"author": "Atilla Ozgur",
"license": "MIT",
}
dependencies are your runtime dependencies that your users need to download while devDependencies are your developer dependencies like your test runtime, grunt helper packages etc.