Uncaught TypeError: TodoList is not a function

Question

I am a novice in React, so maybe someone who is an expert will quickly spot the issue. This is my router.js:

define(["backbone", "react", "jsx!view/todoList"], function(Backbone, React, ReactDOM, TodoList) {
  return Backbone.Router.extend({
    routes : {
      "" : "index"
    },
    index : function() {
      console.log("hello world");

      var todos = new Backbone.Collection([
        {
          text: 'Dishes!',
          dueDate: new Date()
        }
      ]);

      React.render(<TodoList todos={todos} />, document.body);
    }
  });
});

I get the following error in the console: VM7282:19 Uncaught TypeError: TodoList is not a function.

Maybe the issue is with deprecated JSXTransformer (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). Babel is suggested to use instead (in my case instead of jsx!view/todoList to use babel!view/todoList). What I have as a problem with this is from where to import babel.js. Here http://facebook.github.io/react/docs/displaying-data.html they import https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js but when I do the same babel!view/todoList is not working.

fresh5447 fresh5447 · Accepted Answer · 2016-04-15T21:29:17

This might be more of a Backbone issue than React. I am not familiar with Backbone, but in regards to React, this is usually because you are trying to use some component that hasn't been imported or defined properly.

For example, you may be trying to do:

React.render(<TodoList todos={todos} />, document.body);

without properly importing var TodoList = require('./TodoList')

or actually creating the component.

var TodoList = React.createClass({ 
    render: function() {
    // code code code code
  }
})

I believe that is most likely the issue: https://medium.com/react-tutorials/react-backbone-router-c00be0cf1592#.q4bsdqqgr

Uncaught TypeError: TodoList is not a function

1 Answers