Ignore peer dependency check for single package in package.json - npm

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

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"
},
...

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

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.

Once i create and use own module then it will gives error like: Unable to resolve module

I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.
I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.

package.json: Just download dependency but do not install it

I'm about to write a yeoman generator where the whole template is hosted on a git repository. So the package.json of my yeoman generator looks like
{
"name": "generator-foo",
"version": "0.1.0",
"description": "",
"files": [
"generators"
],
"keywords": [
"yeoman-generator"
],
"dependencies": {
"foo-template": "git://somewhere-in-the-world/foo-template.git#0.1.0",
"chalk": "^1.1.3",
"yeoman-generator": "^1.1.1",
"yosay": "^2.0.0"
}
}
Is there any way to prevent npm install from installing the foo-template package, i.e. running any postinstall script just for this package? Instead, it should be just downloaded to node_modules.
As describe here, postinstall scripts can be disabled globally for npm using --ignore-scripts flag.
As a complete solution, I would move your explicit dependency to foo-template to your local postinstall section with ignore scripts enabled:
{
"name": "generator-foo",
...
"postinstall": "npm install --ignore-scripts git://somewhere-in-the-world/foo-template.git#0.1.0",
"peerDependencies": {
"foo-template": "git://somewhere-in-the-world/foo-template.git#0.1.0"
}
}
Note that to make sure the dependency is explicitly described, we should mark it as a peerDependency (e.g. prevents package removal on prune).

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.