error when using connect (function of the react-redux library)

Question

I have a component class that I am using react-redux to connect the redux store, but I am getting an error when I try to pass the component into the connect function.

_react.default.memo is not a function. (In '_react.default.memo(ConnectFunction), '_react.default.memo' is undefined)

wrapWithConnect C:\Users\SESA506797XmobileApp Gatherman\node modul es react-redux\lib\components connectAdvanced.js: 339:45

I enclose an image of the generated errerur

Here is the content of the class in which connect was called

FilmDetail

import React from 'react'
import { StyleSheet, View, ActivityIndicator, ScrollView, Text, Image } 
from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import { connect } from 'react-redux'

class FilmDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      film: undefined,
    }
  }
  componentDidMount() {
    getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
      this.setState({
        film:data,
        isLoading: false
      })
    })
  }

  _displayFilm(){
    const film = this.state.film
    if(film != undefined){
      return(
        <ScrollView style={styles.scrollView_container}>
          <Image
            style = {styles.image}
            source = {{uri: getImageFromApi(film.backdrop_path)}}
          />
          <Text style={styles.title_text}>{film.title}</Text>
          <Text style={styles.description_text}>{film.overview}</Text>
          <Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
        </ScrollView>
      )
    }
  }

  render() {
    return (
      <View style={styles.main_container}>
        {this._displayFilm()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1
  },
})

const mapStateToProps = (state) => {
  return state
}

export default connect(mapStateToProps)(FilmDetail)

This is my package.json

 {
      "main": "node_modules/expo/AppEntry.js",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject"
      },
      "dependencies": {
        "expo": "^32.0.0",
        "numeral": "^2.0.6",
        "react": "16.5.0",
        "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
        "react-native-modal": "^9.0.0",
        "react-navigation": "^3.6.1",
        "react-redux": "^7.0.1",
        "redux": "^4.0.1"
      },
      "devDependencies": {
        "babel-preset-expo": "^5.0.0"
      },
      "private": true
    }

{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject" }, "dependencies": { "expo": "^32.0.0", "numeral": "^2.0.6", "react": "16.5.0", "react-native": "github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", "react-native-modal": "^9.0.0", "react-navigation": "^3.6.1", "react-redux": "^7.0.1", "redux": "^4.0.1" }, "devDependencies": { "babel-preset-expo": "^5.0.0" }, "private": true } — Soutou
– Soutou, Commented Apr 10, 2019 at 1:02

Samuel Vera · Accepted Answer · 2019-04-11 17:03:42Z

8

Had a while ago what I think is the same problem as you. I updated to the latest React version with:

npm install react@latest

Then installed version 0.4.0 of the react schedule package with:

npm i [email protected] --save-dev

And downgraded react-redux with

npm i [email protected]

at least for the moment my problem is solved, hope it works with yours.

answered Apr 11, 2019 at 17:03

Samuel Vera

1411 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Soutou Over a year ago

I have the same error Unable to resolve "./utils/batch" from "node_modules\react-redux\lib\index.js"

Soutou Over a year ago

Putting everything down and installing like this. it works

Caio Kretzer · Accepted Answer · 2019-06-10 22:35:57Z

1

If you're using expo, you have to downgrade your react-redux and clear expo cache.

npm i [email protected]

npm i

expo r -c

answered Jun 10, 2019 at 22:35

Caio Kretzer

1691 silver badge15 bronze badges

Comments

Giii · Accepted Answer · 2022-10-30 16:49:09Z

1

I use yarn to solve it (or npm if you want)

yarn add react-redux

It will update your 'react-redux' to latest version and it solve my problem. Hope it helpful.

answered Oct 30, 2022 at 16:49

Giii

177 bronze badges

Comments

Giovanni Lobitos · Accepted Answer · 2019-04-10 02:20:18Z

0

Just update your React to the latest version. It's backward compatible, so no need to worry.

npm install react@latest

React.memo is only available on React version 16.6 and above.

https://reactjs.org/blog/2018/10/23/react-v-16-6.html

answered Apr 10, 2019 at 2:20

Giovanni Lobitos

8527 silver badges19 bronze badges

1 Comment

Soutou Over a year ago

I do as you have suggested. Now by restarting my project I have this other error Unable to resolve "schedule/tracking" from "node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js"

Da Teng · Accepted Answer · 2019-04-11 02:14:01Z

0

It happened because you used the most recent version of react-redux dependent on react.memo API which is not supported by the Expo SDK. To solve this problem, you can install the older version of react-redux such as version 6.0.

answered Apr 11, 2019 at 2:14

Da Teng

31 bronze badge

3 Comments

Soutou Over a year ago

I came back to this version, there is another error that appears Unable to resolve "./utils/batch" from "node_modules\react-redux\lib\index.js"

Da Teng Over a year ago

Use the exact version 6.0.0 instead of 6.0.1. Hope it resolves your problem.

Soutou Over a year ago

I use version 6.0.0 of react-redux

Ishmael Sibisi · Accepted Answer · 2019-04-12 10:28:34Z

0

I was having the same issue and and got fixed when I downgraded my react-redux back to version 4.4.9

npm install [email protected]

or if you using yarn

yarn add [email protected]

Hope it works for you too. But make sure first this dramatic downgrade doesn't affect your project in a negative way.

answered Apr 12, 2019 at 10:28

Ishmael Sibisi

694 bronze badges

Comments

Manny · Accepted Answer · 2019-04-15 04:23:17Z

Had the same issue. It was solved by switching to yarn and reinstalling all modules with the following setup:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "^9.0.0",
    "date-fns": "^1.30.1",
    "expo": "^32.0.6",
    "moment": "^2.24.0",
    "native-base": "^2.10.0",
    "react": "16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-navigation": "^3.0.9",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.1.1",
    "schedule": "^0.4.0"
  },
  "private": true
}

Collectives™ on Stack Overflow

error when using connect (function of the react-redux library)

7 Answers 7

2 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related