React-Redux's connect() method throwing TypeError

Working on the Dan Abramov's excellent tutorial for Redux, and on chap 27 - Generating containers with connect() - a strange bug is occurring:

First I define these two functions:

const mapStateToProps = (state) => {
   return {
      todos: getVisibleTodos(state.todos, state.visibilityFilter)
   };
}
const mapDispatchToProps = (dispatch) => {
   return {
      onTodoClick: (id) => {
         dispatch({
            type: 'TOGGLE_TODO',
            id
         })
      }
   }
}

Then I import the necessary dependency:

import { connect } from 'react-redux'

Then I create my component using the method exposed from react-redux, and pass in the two functions, finally connecting to my other component, TodoList.

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

When I do this, it causes the browser to fail to render and the console returns:

TypeError: Cannot read property 'displayName' of undefined

I have never come across this error before, and it seems specific to the connect() method of react-redux.

Has anyone come across this before, and/or know what could be causing it?

UPDATE:

getVisibleTodos is defined above. If its TodoList you want to see...

const TodoList = ( {todos, onTodoClick} ) => (
   <ul>
      {todos.map(todo =>
         <Todo key={todo.id}
            {...todo}
            onClick={() => onTodoClick(todo.id)}
         />
      )}
   </ul>
)

Solution

You're probably defining the TodoList component after your call to connect. Unlike the var keyword, the ES6 keywords like let, const, and class do not get hoisted to the top of the scope, and only exist starting at the line they're declared on. So, if you call connect() before you've defined TodoList, you're effectively running connect()(undefined). It's also possible that you might have an import statement that's not correct, which could also result in TodoList being undefined.

See https://github.com/reactjs/react-redux/issues/253 for some further discussion.