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.
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 am trying to use the CLI to create a project with Ionic and React. I noticed that the bug is in the Typescript checking step.
I've been trying the following things to solve it:
Remove the node_modules and the package-lock.json
npm cache clear --force
Downgrade the Typescript version to 3.3.3333 (Most of the users who had the same problem solve it with this)
npm i
ionic serve
But it keeps showing me the same prompt [react-scripts] Files successfully emitted, waiting for typecheck results...
Dependencies:
"#capacitor/core": "2.1.0",
"#ionic/react": "^5.0.7",
"#ionic/react-router": "^5.0.7",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^8.0.3",
"#types/jest": "^24.0.25",
"#types/node": "^12.12.24",
"#types/react": "^16.9.17",
"#types/react-dom": "^16.9.4",
"#types/react-router": "^5.1.4",
"#types/react-router-dom": "^5.1.3",
"ionicons": "^5.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "3.3.3333"
What else can I do?
Downgrade to react-scripts 3.4.0
npm uninstall react-scripts -S
npm i react-scripts#3.4.0
ionic serve
Insights
If I open a tab with localhost:8100, it works (even the hot reload), but the ionic serve does not open a window by itself and the prompt in the terminal still the same
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"
}
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.