Why yarn should update library? - reactjs

When i try to update one package in my project (Redux-form from 3 to 6), yarn updating react library too. Why? How i can debug this part?
I was trying:
Delete old version of redux form and add new version with this command
Yarn install redux-form

redux-form 6 has three peerDependency
"peerDependencies": {
"react": "^15.0.0",
"react-redux": "^4.3.0",
"redux": "^3.0.0"
}
So in order to work, it need these three. If you don't have one, probably yarn is forcing you to upgrade.

Related

Troubleshooting React versions: Is it O.K. to simply change the package.json file?

I think that when I upgraded to React 18, React broke a part of my app. I wanted to verify this behavior by simply using my previous package.json file which I saved as package-previous.json.
I'm assuming webpack allows one to simply change the package.json file to restore a previous app configuration, but I wanted to make sure there are no caveats.
I'm going back from:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.6"
},
to:
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6"
},
There's no problem with updating the dependency versions in your package.json; if the dependencies you changed are already installed, you can run npm update to upgrade or downgrade their versions, otherwise, you should run npm install.
This will update your node_modules and your package-lock.json files.

material ui lab date picker, Can't resolve '#material-ui/lab/AdapterDateFns'

Can't resolve '#material-ui/lab/AdapterDateFns'
Can't resolve '#material-ui/lab/DateTimePicker'
Can't resolve '#material-ui/lab/LocalizationProvider'
I am getting these errors even after having installed #material-ui/lab
This works for me very well
npm install #mui/lab
In Material UI v5 you need to install #mui/lab.My dependencies are here :
"dependencies": {
"#mui/lab": "^5.0.0-alpha.54",
"#mui/material": "^5.2.1",
}
For more information check this link
I have a working codesandbox here: https://codesandbox.io/s/youthful-wave-8xjy4
Make sure both #material-ui/core and #material-ui/lab are at version "5.0.0-alpha.24" or above as I ran into the same import errors as you when following the guide at: https://next.material-ui.com/guides/pickers-migration/
// package.json
{
"dependencies": {
"#emotion/react": "11.1.5",
"#emotion/styled": "11.1.5",
"#material-ui/core": "5.0.0-alpha.24",
"#material-ui/lab": "5.0.0-alpha.24",
"date-fns": "2.17.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.0"
},
}
Try running npm install #material-ui/core#next and npm install #material-ui/lab#next
This should move you to version 5.
If the need arises, delete the node_modules folder and run npm install.
Now if you look into the lab folder in node_modules/#material-ui, you will see the
Make sure that you installed a date management library. I think that #material-ui/lab/AdapterDateFns will be supported with the date-fns library.
date-fns installation
I read it at mui documentation for React Date Picker.
THIS WORKED FOR ME!!!!
I went into the node_modules to look for the specific files:
The location of the imports was not accurate so I changed them
accordingly
Then all these components are exported as a default so I removed
the curly braces and it worked for me.
I have installed these :
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/lab": "^5.0.0-alpha.108",
"#mui/material": "^5.10.14",

update strategy for npm packages of expo

I wonder what the update strategy for expo is when using expo-cli.
F.e. my package currently consists of these packages:
"expo": "39.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "1.7.0",
"react-native-reanimated": "1.13.1",
"react-native-web": "0.14.8",
Normally when i do default react applications i just add renovate-bot to my repo and update everything all the time. Things seem to be different when using expo. Some questions:
When i updated react-native-gesture-handler or react-native-reanimated i got warnings when running expo start that these versions are out of range for my currently running expo package. Is it correct that i should not update those dependend packages until expo releases an update?
When i updated react to 17 no such warning popped up, so it seems expo is fine when i run newer version of react? (although i had other runtime warnings pop up related to it)
Why is react-native fixed to this specific version? I guess because expo expects an exact version? Is this when expo upgrade should be used once a new expo version gets released?
Thanks for answering any of these questions.

Can I safely update react and react-dom without updating react-scripts?

I have used CRA on a project for 2 years now.
Currently, my packages are on the following outdated versions but I want to update to React 16.8 because it's a peer-dependency for a lot of npm packges I want to use.
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.0",
Can I safely update react and react-dom to 16.8 without updating react-scripts?
Note, I tried updating CRA (react-scripts) to 2.x.x recently and it caused a bunch of my older libraries to fail.
I wouldn't recommend, unless there is a need on it. (Like a security breach)
You probably will find some compatibility issues, and for this to work, you will need to update your dependencies.

__WEBPACK_IMPORTED_MODULE_4_react___default.a.memo is not a function

I just connect the app with redux and react-redux connect function, together with state and dispatches. It compiled without problems but the results are not showing. And it looks like below.
I tried to find it and found that i have to change react version.
$ sudo npm install --save react#16.4.0 react-dom#16.4.0
But it didn't work.
I am following this tutorial.
https://www.youtube.com/watch?v=BxzO2M7QcZw
you're using wrong version of React, React.memo is introduced with version 16.6.0 so, try this command to install the right version
npm install --save react#16.6.0 react-dom#16.6.0
for more info click here
This had happened to me as well. This happens when dependencies version gets updated, and the dependencies of the YouTube video you are watched has an old version.
Hence, replace the following dependencies in the package.json file:
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
and run npm install.
Since the connect() function connects a React component to a Redux store,
react, redux need to be version supported. If you are willing to use newest dependencies please refer the Redux documentation.
The above method should solve your problem.
That's because #material-ui/styles has a peer dependency on react >= 16.7.0-alpha.0 and react-dom >= 16.7.0-alpha.0 that include hooks.
To use #material-ui/styles, change your react and react-dom dependencies like this:
"dependencies": {
...
"react": "^16.7.0-alpha.2",
"react-dom": "^16.7.0-alpha.2",
...
},
Find out which version of react-redux version you are using and then go to https://react-redux.js.org/versions. Click on the documentation associated with your version. You should see something like this:
Installation
React Redux 7.1 requires React 16.8.3 or later.
Update your react in package.json to the appropriate version and install.

Resources