I had an error after installed "react-bootstrap-table".
├── react#15.4.1
└── UNMET PEER DEPENDENCY react-router#3.0.0
My package.json
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"react": "^15.4.0",
"react-addons-linked-state-mixin": "^15.4.0",
"react-bootstrap": "^0.30.6",
"react-bootstrap-table": "^2.6.0",
"react-cookie": "^0.4.8",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-apply-middleware": "0.0.2",
"react-router-bootstrap": "^0.23.1",
"react-router-relative-links": "^0.1.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.1.0",
"redux-thunk": "^2.1.0"
}
Thanks any help.
This blog post explains Peer Dependancies well!
https://nodejs.org/en/blog/npm/peer-dependencies/
There's one use case where this falls down, however: plugins. A plugin package is meant to be used with another "host" package, even though it does not always directly use the host package. Most plugins never actually depend on their host package. The solution to this was peer dependancy
In your case it seems that you don't actually need to install it since I dug through the react-bootstrap-table package's repo and found that react-router#3.0.0 is mentioned as a dev dependency and used in their example app.
So unless they bundle the example along with the package which is highly unlikely, you can ignore it.
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.
I'm trying to install node dependencies for my react project that i downloaded from source control but having some troubles.For instance I'm getting this error:
Failed to compile
./node_modules/chain-function/index.js
Error: ENOENT: no such file or directory, open 'C:\....\v7\ClientApp\node_modules\chain-function\index.js'
I do not have "chain-function" a listed as dependency in my package.json file, and i'm not sure how to figure out what is causing the error here and how to troubleshoot it.
here is my package.json dependencies:
"bootstrap": "^3.3.7",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"react": "^16.5.2",
"react-bootstrap": "^0.31.5",
"react-cookie": "^3.0.4",
"react-dom": "^16.0.0",
"react-redux": "^5.0.7",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "^2.0.4",
"react-text-mask": "^5.4.3",
"react-tooltip": "^3.9.0",
"react-transition-group": "^2.5.0",
"redux": "^4.0.0",
"rimraf": "^2.6.2"
It's possible that some of your dependency in package.json rely on chain-function or it's just the problem with the network.It's normal to face a problem like this.I can only give you some advices.
delete your node_modules,run "npm install" again
download the project in another directory folder, and try it again
check your network
Whenever I run yarn install yarn install with the following package.json:
"dependencies": {
"font-awesome": "4.7.0",
"immutable": "3.8.1",
"lodash": "^4.17.4",
"object-assign": "4.1.1",
"promise": "7.1.1",
"react-fontawesome": "1.6.1",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-redux": "^5.0.6",
"react-fontawesome": "1.6.1",
"redux": "3.7.1",
"redux-api": "0.10.8",
"redux-logger": "^3.0.6",
"redux-form": "^7.0.4",
"redux-thunk": "2.2.0",
"whatwg-fetch": "2.0.3"
},
I get the following warning:
warning "ajv-keywords#1.5.1" has incorrect peer dependency "ajv#>=4.10.0".
warning "redux-form#7.0.4" has incorrect peer dependency "react-redux#^4.3.0 || ^5.0.0".
I don't understand why it is complaining about react-redux#^4.3.0 || ^5.0.0 when I am referencing react-redux#5.0.6.
Pull Request #3803 introduced this behavior in fixing Bug #3710 where peer dependencies were only being resolved from their siblings and the repository root, but not higher-levels. Modules at different directory levels referencing the the same code could require different versions. Pull Request #4478 (code change here) updated yarns logic to resolve peer dependencies from higher levels.
Update Yarn along with your packages and you should stop seeing the error.
Also, avoid using the npm upgrade command to get the latest version of yarn - use npm install.
npm install -g yarn
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"
}