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

Question

The code below gives

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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 :)