CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Ram Kumar Parthiban
Ram Kumar Parthiban

Reputation: 443

You must pass a component to the function returned by connect. Instead received undefined

The code below gives

Uncaught Error: You must pass a component to the function returned by connect. Instead received undefined

List.js

import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions/PostList' //Action Creator defined by me

const mapStateToProps = (state, ownProps) => {
    return state.postsList
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({"postsList":postList},dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PostList);

PostList.js

import React from 'react'

export const PostList = (props) => {
    return <div>List</div>
}

Please help me with a solution?

Upvotes: 25

Views: 49539

Answers (5)

Lesley Livingstone
Lesley Livingstone

Reputation: 1

In my case, it was because of the usage of enums (TypeScript). Try without enums in your code.

Reason : Enums can go undefined during runtime.

Link to Related Question

Hope it solves your problem :)

Upvotes: 0

dzek
dzek

Reputation: 213

In my case it was Expo server that sometimes doesn't catch filesaves on Windows (probably) and it was seening old version of the component I've tried to connect (I had no export there yet probably). Re-saving my component without really touching anything fixed the issue.

Restarting Expo server with cleaned cache would probably help as well.

Upvotes: 0

spp
spp

Reputation: 43

More details can be found here.

There might be three reasons, that are summarized as follows:

  • Circular dependencies between components
  • Wrong usage of export and export default then imported the wrong way
  • Used the connect function wrongly, passed the wrong parameters

In my case is was Circular dependencies, and the circular-dependency-plugin helped me fix it.

Upvotes: 4

Lucas Bustamante
Lucas Bustamante

Reputation: 17297

Not related to the asker specifically, but if you're facing this error, it's worth to check if you have the connect() syntax right:

const PreloadConnect = connect(mapStateToProps, {})(Preload);

export default PreloadConnect;

Note that Preload, is passed as a IIFE parameter.

Upvotes: 7

Canastro
Canastro

Reputation: 3009

You are doing import PostList from '../components/PostList'; so you need to use export default in your PostList.js file.

Otherwise you need to do import { PostList } from '../components/PostList';.

To whoever is interested, here is a nice article about es6 import/export syntax: http://www.2ality.com/2014/09/es6-modules-final.html

Upvotes: 30

Related Questions