react-redux 4.0.6 and Meteor

I am following the Get Started Videos for Redux and I have this error Uncaught TypeError: Cannot read property 'displayName' of undefined with this config:

    "meteor": "1.3.beta4",
    "redux": "3.0.5",
    "react-redux": "4.0.6",
    "redux-simple-router": "1.0.2"

Here is my code:

import { createStore } from 'redux'
import { Component } from 'react'
import { combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'

if (Meteor.isClient) {
  Meteor.startup(function () {

    const todoReducer = (state, action) => {
      switch (action.type){
        case 'ADD_TODO':
          return {
            id: action.id,
            text: action.text,
            completed: false
          };

        case 'TOGGLE_TODO':
          if (state.id != action.id) return state
          else{
            return {
              ...state,
              completed: !state.completed
            };
          }


        default:
          return state;
      }
    };

    const todosReducer = (state = [], action) => {
      switch (action.type){
        case 'ADD_TODO':
          return [
            ...state,
            todoReducer(undefined, action) // no state for a new todo
          ];

        case 'TOGGLE_TODO':
          return state.map(t => todoReducer(t, action));

        default:
          return state;
      }
    };

    const visibilityFilterReducer = (state = 'SHOW_ALL', action) => {
      switch(action.type){

        case 'SET_VISIBILITY_FILTER':
          return action.filter;

        default:
          return state;
      }
    };

    const rootReducer = combineReducers({
      todosReducer,
      visibilityFilterReducer
    });


    const Link = ({
      active,
      children,
      onClick
    }) => {
      if(active){
        return (
          <span>{children}</span>
        );
      }

      return (
        <a href="#"
           onClick={(e)=>{
            e.preventDefault();
            onClick(active);
           }}
        >{children}</a>
      );
    };

    class FilterLink extends Component{

      componentDidMount(){
        const {store} = this.context;
        this.unsubscribe = store.subscribe(()=>
          this.forceUpdate()
        )
      }

      componentWillUnmount(){
        this.unsubscribe();
      }

      render(){
        const {store} = this.context;
        const props = this.props;
        const state = store.getState();

        return(
          <Link
            active={props.filter === state.visibilityFilterReducer}
            onClick={()=>
              store.dispatch({
                type:'SET_VISIBILITY_FILTER',
                filter:props.filter
              })
            }
          >
            {props.children}
          </Link>
        );
      }
    }
    FilterLink.contextTypes = {
      store: React.PropTypes.object
    };

    const getVisibleTodos = (todos, filter)=>{
      switch(filter){
        case 'SHOW_ALL':
          return todos;
        case 'SHOW_ACTIVE':
          return todos.filter(t => !t.completed);
        case 'SHOW_COMPLETED':
          return todos.filter(t => t.completed);
      }
    }

    const Todo = ({
      onClick,
      completed,
      text
    }) => (
      <li onClick={onClick}
          style = {{
            textDecoration:
              completed ?
                'line-through':
                'none'
          }}>
        {text}
      </li>
    );

    const mapStateToProps = (state) => {
      return {
        todos: getVisibleTodos(
          state.todosReducer,
          state.visibilityFilterReducer
        )
      }
    }

    const mapDispatchToProps = (dispatch) => {
      return {
        todos: id =>
          dispatch({
            type:'TOGGLE_TODO',
            id
          })
      }
    };

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

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


    const AddTodo = (props, {store}) => {
      let input;

      return(
        <div>
          <input type="text" ref={
              node =>{
                input = node;
              }
            }/>
          <button onClick={() => {
            store.dispatch({
              type:'ADD_TODO',
              id: nextTodoId++,
              text: input.value
            });
            input.value = '';
          }}>Add todo</button>
        </div>
      )
    };
    AddTodo.contextTypes = {
      store: React.PropTypes.object
    };

    const Footer = () => (
      <p>
        Show:
        {' '}
        <FilterLink filter='SHOW_ALL'>All</FilterLink>
        {' '}
        <FilterLink filter='SHOW_ACTIVE'>Active</FilterLink>
        {' '}
        <FilterLink filter='SHOW_COMPLETED'>Completed</FilterLink>
      </p>
    );

    let nextTodoId = 0;
    const TodoApp = () => (
      <div>
        <AddTodo/>
        <VisibleTodoList/>
        <Footer/>
      </div>
    );

    ReactDOM.render(
      <Provider store={createStore(rootReducer)}>
        <TodoApp/>
      </Provider>,
      document.getElementById('render-target')
    );
  });
}

I will appreciate any help on this. I don’t find any FAQ or troubleshooting section on this.

[dagatsoin]

Figure it out. I forgot to declare TodoList BEFORE const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList);

[markerikson]

Actually, I have good news for you. Looking at the next branch, it seems that @jimbolla has already implemented such a check, here: connectAdvanced.js#L67-L71