I googled lot about this issue.
But could not find this issue belongs to which library?
How to fix it?
any help will be appreciated
"resolutions" :{
"nth-check":"2.0.1"
}
Add it in Package.json then run npm install
This is a known issue, and it should not affect your actual app as it's coming from react-scripts package.
Open package.json. You will find this:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
Take react-scripts and move it to devDependencies (if you don't have it, create it):
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"react-scripts": "4.0.3"
},
Then, ensure you run npm audit --production rather than npm audit.
You can read more from official sources:
https://github.com/facebook/create-react-app/issues/11174#issuecomment-979449264
Related
I am trying to use sass with react but its not working. The styles are not getting applied. I have used CRA. and I have also installed sass as per official docs of CRA. It works fine if I change scss to css.
I am mentioning the dependencies below
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^8.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "0.9.5",
"redux": "^4.1.2",
"sass": "^1.50.0"
}
The issue was with react-scripts. Somehow CRA is currently shipping react-scripts version 0.9.5. Updating the react-scripts to latest version solved the issue.
I tried to update material ui following the instructions on their web site
from 3.9.3 to the latest version.
I ran npm install #material-ui/core and npm install react#latest
but I am getting the following error when I deploy my app:
hoist-non-react-statics.cjs.js:70 Uncaught TypeError: Cannot convert undefined or null to object
at getPrototypeOf (<anonymous>)
at e (hoist-non-react-statics.cjs.js:70)
at n (withTheme.js:47)
at Module.1038 (AppSettings.js:95)
at u (index.html:1)
at Object.620 (main.5ef97776.chunk.js:1)
at u (index.html:1)
at r (index.html:1)
at Array.t [as push] (index.html:1)
at main.5ef97776.chunk.js:1
These are the dependencies in my app:
"dependencies": {
"#date-io/core": "^1.3.8",
"#date-io/moment": "^1.3.11",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^3.0.2",
"material-design-icons": "^3.0.1",
"material-ui-pickers": "^2.2.4",
"moment": "^2.24.0",
"react-app-polyfill": "^1.0.4",
"react-dates": "^16.7.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.3.0",
"react-select": "^3.0.8",
"core-js": "^2.6.12",
"flux": "^3.1.3",
"react": "^17.0.2",
},
Any help with this?
You need to update your package.json to use the latest version of Material-UI.
"dependencies": {
"#material-ui/core": "^4.0.0"
}
Replace version with the latest or desired version.
Run
npm install #material-ui/core
or
yarn add #material-ui/core
Follow this guide on the changes you have to make. Remember in open-source environments, upgrading a package from x.0.0 to y.0.0 is considered a major version upgrade and will contain breaking changes 99% of the time. Simply bump the version and do nothing will almost guarantee to break your code.
Any idea how to resolve this error? I get it when trying npm install:
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.14.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.1" from react-card-flip#1.1.0
npm ERR! node_modules/react-card-flip
npm ERR! react-card-flip#"^1.0.11" from the root project
The package.json has: "react-card-flip": "^1.0.11",
I removed the node_modules directory and the package-lock.json file.
I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.
Thanks for any ideas or help you can provide.
Full content of the package.json below in case that helps.
package.json content:
{
"files": [
"./LICENSE.md"
],
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.39.0",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"apexcharts": "^3.19.3",
"axios": "^0.21.1",
"bootstrap": "^3.4.1",
"cleave.js": "^1.5.2",
"country-state-city": "^1.0.0",
"fomantic-ui": "^2.8.7",
"moment": "^2.24.0",
"plaid": "^8.1.6",
"react": "^16.14.0",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.4.3",
"react-burger-menu": "^2.6.11",
"react-card-flip": "^1.0.11",
"react-dom": "^16.8.6",
"react-dropzone": "^10.1.4",
"react-google-login": "^5.1.21",
"react-grid-system": "^4.4.5",
"react-intl-universal": "^2.4.1",
"react-redux": "^6.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"react-scroll": "^1.7.14",
"react-select": "^2.4.4",
"react-share": "^3.0.0",
"react-signature-canvas": "^1.0.3",
"react-slick": "^0.24.0",
"react-star-ratings": "^2.3.0",
"react-stripe-elements": "^3.0.0",
"reactjs-popup": "^1.3.2",
"reactstrap": "^8.0.0",
"reaptcha": "^1.4.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"semantic-ui-react": "^0.86.0",
"socket.io-client": "^2.3.0",
"sweetalert2": "^10.14.0",
"sweetalert2-react": "^0.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
TL;DR Use npm install --legacy-peer-deps
I am able to replicate the error with npm#7 but not npm#6.
Version 7 introduced some stricter peer dependency checking. If you just want your installation command to succeed (which is what most people who encounter this error want, rather than figuring out what the dependency issue is), you can use npm install --legacy-peer-deps.
The source of the issue is that your version of react-card-flip requires react#17 but many of your other dependencies require react#16. Old npm worked around that. New npm let's you know there's a problem. You can live without react-card-flip, or update all your other dependencies (no guarantees they've all been updated to support react#17 though), or try to find an older version of react-card-flip that maybe supported react#16, although running a bunch of older versions of dependencies is not something I would recommend.
The solution was to update the package.json file and change the react-card-flip entry.
From:
"react-card-flip": "^1.0.11",
To:
"react-card-flip": "~1.0.11",
The carat (^) tells npm to install 1.0.11 or newer version of react-card-flip. It was trying to install the newer version 1.1.0, which relies on React version 17.0.1. The tilde (~) tells npm to install the newest minor release version. The latest minor version of react-card-flip is 1.0.11 and it requires React 16.14.0, matching what I have installed - resolving the problem.
Another work around solution is to run npm install with the parameter --legacy-peer-deps.
Use npm i react-card-flip --force
This will work for you as we can install this forcefully. And worked for me as well. I was facing the same issue while trying to install react-card-flip.
When I install redux-thunk it shows an error and you can see attached image for more info -
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules.staging\redux-thunk-069b38d0' -> 'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules\redux-thunk'
And I have also try to install "redux-thunk" with the administrator but shows the same error.
Pakage.json -
"dependencies": {
"axios": "^0.19.0",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
try removing node_modules and do npm install. If it doesn't work, delete node_modules, add "redux-thunk": "^2.3.0" to your dependencies, then run npm install -i
I have faced similar issues in windows. this looks more of a permission issue.
Try running the cmd window in run as administrator mode. this should mostly give permission to npm to execute the script.
if that does not work, then the option would be to delete the folder redux-thunk from node_modules directory and try reinstalling the redux-thunk module again
The template being considered is https://github.com/StephenGrider/ReduxSimpleStarter
After git clone, the folder is merely 160kb.
But after npm install, the folder is 620MB.
Is there a way to make it as small as possible? It was suspected that the react native stuff (including the binaries?) is really huge, so can something be done such as npm install --minus react-native if react native is not needed at all?
P.S. a few days have passed, and today Apr 2, 2017, the same repo, the same as before, after npm install, is only 138MB. I guess somebody fixed the dependencies (of the npm modules registry), so that some 500MB of stuff is not installed.
There is no react-native in the starter project that you referenced. :)
So, that is not what is causing the large directory.
It is typical to have a large node_modules directory. This directory is usually placed in the .gitignore (or similar) so that it is not committed to the source control repository.
In order to track dependencies, use the --save and --save-dev switches in npm install and make sure to commit your package.json
Also, when you npm install for production, use the npm install --production switch to exclude dev dependencies.
When you run npm install all dependencies will be installed as from package.json,
this includes devDependencies and dependencies (using npm you can also control what to install or not as Davin Tryon pointed out). Below an extract from your package.json you can see all dep included. Also you could consider ignoring node_modules on git or svn to do use space on your repository.
You could consider manually remove the node_modules directory if you do not work on a project so you can save some space on you HD.
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4"
}