__WEBPACK_IMPORTED_MODULE_4_react___default.a.memo is not a function - reactjs

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.

Related

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.

Peer vs Dependency for npm package

I am creating a react-native npm module.
The npm module uses React & React-Native Packages i.e say something like this
import React, { Component} from 'react'
import { View } from 'react-native'
class something extends Component {
render () {
return (
<View>
{/* Code */}
</View>
)
Now, here adding should I add React and React-native as dependencies or peerDependencies and why?
Update: My current package.json for library (npm module)
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-native": "^0.60.5",
"react-native-device-info": "^2.3.2"
}
And For the app let it be something like
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-native": "^0.60.5"
}
Does it look correct?
If your module is something like an ui library and to be installed into another react app, it should list react and react-native as devDependencies and peerDependencies. There should not be 2 versions of react (and react-native) in the host app, so in order to achieve that, use these 2 dependencies, they won't install anything in the host app.
devDependencies: describes the packages that you rely on when developing; you both need react and react-native so put them here; use any versions that you want.
peerDependencies: describes the packages that you require/suggest your host app to use, the versions should at least match your uses, so there could be a minimum version or not limited;
For example check this package.json, when developing, this package uses "react": "^16.8.5" as "devDependencies"; and when being installed, it actually does not use any specific api belongs to certain version of react, so it uses "react": "*", as "peerDependencies".
References:
https://nodejs.org/es/blog/npm/peer-dependencies/
What we need is a way of expressing these "dependencies" between
plugins and their host package. Some way of saying, "I only work when
plugged in to version 1.2.x of my host package, so if you install me,
be sure that it's alongside a compatible host." We call this
relationship a peer dependency.
https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file
"devDependencies": Packages that are only needed for local development
and testing.

React.default.memo is not a function (React-Native) wrapWithConnect

I get this the error
_react.default.memo is not a function
and wrapWithConnect.
This is a react-native project and it worked fine before I used the connect function to connect my dispatch into my react component:
Package Versions:
"react": "16.5.0",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
code
const mapDispatchToProps = dispatch => {
return {
sendEmail: (email, navigateMap) => dispatch(sendEmail, navigateMap))
export default connect(null, mapDispatchToProps)(Login)
I had the same problem and I changed the version of react-redux to 6.0.0 instead of using a more recent one, and the issue was resolved.
You can change the version by running following command:
npm install react-redux#6.0.0.
My project version is greater than 16.5.0 but I am unsure if this also has an impact or not.
Had this exact same error. Realised it's not due to syntax errors, but the react-redux version compabitility. Once I ran yarn check, it gave me multiple messages that "react-redux#react#^16.8.4 does not satisfy found match of react#16.5.0".
Expo is react 16.5.0 while react-redux expects react version 16.8.4 . As moi answered, installing react-redux 6.0.0 worked for me. Trying to change any other package caused even more errors to appear
Try using react 16.6.0 instead of 16.5.0
This is issue with expo.Try to clear expo cache by using this command
expo r -c
Try update your dependencies.
I have the same problem and I'm using npm-check-updates.
Here's a update check log:
expo ^32.0.0 → ^32.0.6
react 16.5.0 → 16.8.6
react-navigation ^3.6.1 → ^3.7.1
babel-preset-expo ^5.0.0 → ^5.1.1
Run npm install to install new versions.
If you are feeling lost and shelterless while trying to implement a modern React-Native inside Expo app, do not worry my friend, you are not alone.
I had this problem and found that:
expo 32.0 does not support react 16.8
react-redux 7.1 and on require react 16.8
I was able to make it work with this set of versions:
"expo": "^32.0.0",
"react": "16.5.0",
"react-redux": "^6.0.1",
You can replace them in your package.json, then you should do:
> rm -rf node_modules
> [npm|yarn] install
> expo r -c
In order to remove previous versions from node_modules and Expo cache.
To combine the two answers that solved it for me:
Remove new react-redux: yarn remove react-redux
Install the older version of react-redux: yarn add react-redux#6.0.1
Clear expo cache: expo r -c
That will do the trick.

create-react-app using old version of react

I'm using create-react-app and have updated react and react-dom to later versions, yet when I console log the version of react being used, it's still showing an older version.
package.json
"react": "^16.3.0",
...
"react-dom": "^16.3.0",
Then I log the version used:
console.log('React.version', React.version);
And it tells me:
React.version 15.6.2
How can I get create-react-app to use the newer version?
Reason for update, I want to use React Context which is only available from version 16.3.0+

Why yarn should update library?

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.

Resources