_react.default.memo is not a function | wrapWithConnect issues - javascript

When wrapping a component with connect()(Component), I am getting an error on my React Native application. "_react.default.memo is not a function (In _react.default.memo(ConnectFunction), _react.default.memo is undefined. How can I resolve this issue?
Screenshot of the error
I believe this issue is based on my version numbers with React and Redux. But I am unable to locate the culprit. This application is in very early development, but perhaps I just forgot to connect something with my store.
Currently my versions from package.json are the following
"dependencies": {
"expo": "^32.0.6",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
}
I have tried rolling back react-redux to 6.0.0 and react to 16.5.0 as described in this thread but, I get a different error.
Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
I have tried uninstalling and reinstalling react-redux. (including deleting the folder). I don't even see a call to utils/batch inside that index.js file.
Any help would be greatly appreciated. The component renders correctly before connect is added. Exception happens when export default connect()(ComponentName) is invoked.
if needed, my repository is found here. Since then, though, I have toyed with the versions.

Switching to React Redux 6.0.0 npm install react-redux#6.0.0.
In order to get rid of the Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
Clear expo caches with expo r -c.
https://forums.expo.io/t/how-to-clear-the-react-native-packager/1352

I think I was just able to resolve this. I finally caved and installed yarn letting Yarn take over the dependency install seemed to have worked.
My dependencies are running at
"dependencies": {
"expo": "^32.0.6",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
and my app is back to running with everything acting compatible again. Not sure what was done differently with Yarn. But I am relieved that I got this back up. I hope this helps others!

Related

How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)

I am using ANTd with a React application I am building for a school project. The App runs fine however, on startup I get the following: craco: *** Cannot find ESLint loader (eslint-loader). *** which is concerning. I have looked into this and apparently this link https://github.com/gsoft-inc/craco/pull/219 offers support for the issue. I am not advanced enough to know how to apply this fix to my own React project and I feel myself and other beginners would benefit greatly from an explanation on how to do so. Thanks to whoever can help!
For react, this happens when we have DISABLE_ESLINT_PLUGIN=true in our environment variable (or in the .env.production file). Instead, we should disable ESLint in craco.
Remove DISABLE_ESLINT_PLUGIN=true from environment variable or env file.
Then in craco.config.js, add this:
module.exports = {
// ...
eslint: {
enable: false
},
// ...
}
This worked for me too. Run npm install after making changes in craco.config profile
Was an easy fix.
In package.json replace/add the following dependencies:
{
"name": "antd-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.1.1",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"antd": "^4.12.2",
"craco-less": "^1.17.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},

ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema

Currently learning React JS, I am still newbie regarding these technologies.
After updating the webpack from 4.30.0 to 5.10.0 then I run npm start, some errors appeared as below. I have tried to delete node_modules and reinstall, then npm start, it doesn't change anything.
Dependencies :
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "4.0.2",
"webpack-hot-middleware": "2.25.0",
"webpack-pwa-manifest": "4.3.0",
Error :
Solved similar issue with upgrading
"webpack-dev-server": "^4.0.0-beta.3",
I believe 3.x is not fully compatible.

console.error: React Native version mismatch

im getting this error, React Native version mismatch.
It says my javascript is version 0.62.0-rc.5 and my Native is version 0.61.4
It tells me to make sure to rebuild the native code.
Im using exponential to build my project. I've tried to change react native version a couple of times with no success.
Here are my dependencies:
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-web": "~0.11.7"
},
Here is the error:
What should i do next?

React-native and react dependency conflicts

Currently I'm using React Native 0.42.0 with React 15.4.2, and there is a bugfix: Fix crash if native code tries to update the size of a modal view after JS has removed it in the 0.44.0 which is the latest release of the React Native. I wanted to update for the latest version but it's require 16.0.0-alpha.6 React version. There is problems, because the other npm packages don't support the alpha version of the React and they require the 15.x.x version.
What is the proper solution for this problem?
There is my related part of the package.json:
"dependencies": {
"axios": "^0.16.1",
"lodash": "^4.17.4",
"querystring": "^0.2.0",
"react": "16.0.0-alpha.6",
"react-addons-pure-render-mixin": "^15.4.2",
"react-native": "0.44.0",
"react-native-cookies": "^3.1.0",
"react-native-device-info": "^0.10.2",
"react-native-lazyload": "^1.1.0",
"react-native-router-flux": "^3.38.0",
"react-native-swiper": "^1.5.4",
"react-native-vector-icons": "^4.0.0",
"react-navigation": "^1.0.0-beta.7",
"react-redux": "^5.0.3",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
I don't know if this can be taken as a response but in my case having the same problem i only updated into the latest version possible without depending on the alpha version of react (0.42), and we'll need to wait until the next React.js versions comes out.
The official explain that i heard was that react-native take some React Fiber considerations that are not included on React.js for now

"Unknown named module" error in react native

I'm creating an app using react native but some imports raise the error from the title: "Unknown named module". This happens with two packages, react-native-material-design and react-native-db-models, so I suspect the problem isn't on the modules but in my setup.
I tried linking the packages with react-native link and repackaging the app using react-native run-android, but none of these solved this issue. I've looked up examples of imports on github, and even copying working code raises the same error.
I tried installing the modules using either yarn and npm. I tried with relative paths like ../../react-native-db-models. Didn't work!
This is how I import the modules:
import RNDBModel from 'react-native-db-models';
import { List, Button, Toolbar, } from 'react-native-material-design';
These are my project dependencies:
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2",
"react-native-db-models": "^0.1.3",
"react-native-material-design": "^0.3.7",
"react-native-md-textinput": "^2.0.4",
"react-native-vector-icons": "0.8.5",
"react-redux": "^5.0.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4"
},
If React/React Native is incompatible with these modules, how do I figure out which version should I use? Maybe the error has nothing to do with imports and has something to do with my project?
The package server started by react-native start seems to have a cache of the node modules. Stopping and restarting the server solved the issue.
Always restart your react server after installing modules!
A quick check on the package's repository shows 'List' module is no longer available. Here is a link to why it was removed.
So, you will have to remove 'List' module from your import:
import { Button, Toolbar, } from 'react-native-material-design';

Categories