Uncaught TypeError: object is not a function

[smnplk]

Hi!

I get the error in my title which happens at line 92 in instantiateReactComponent.js. At this line: instance = new element.type(element.props);

In my app.js file i have this code:

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;

var ProviderDashboard = require('./components/provider_dashboard');

var App = React.createClass({
  render: function() {
    return (
      <div>
        {/*!important, inside here come  template*/}
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="trainer" path="trainer" handler={ProviderDashboard}/>
    <DefaultRoute handler={ProviderDashboard}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

In my provider_dashboard.js I have:

var React = require('react');
var Header = require('./header');
var ListNavigation = require('./list_navigation');

var ProviderDashboard = React.createClass({
  render: function() {
    var navigation_links = [
      {text: "Clients", icon: "ion-person-stalker"},
      {text: "Programs", icon: "ion-university"},
      {text: "Assessments", icon: "icon-pages"},
      {text: "Appointments", icon: "ion-clock"}
    ];

    return (
      <div>
        <Header text="Provider"/>
        <ListNavigation navigation_links = {navigation_links}/>
      </div>
    );
  }
});

[ryanflorence]

Will probably need to see Header and ListNavigation too.

Get rid of <Header/>, if you still have the error, put it back and then get rid of <ListNavigation/>. I'm going to guess its one of those giving you issues.

What are your versions for:

• React
• React Router
• JSX Transformer (one of: jsx-loader, reactify, react-tools)

[smnplk]

Hey @rpflorence thanks for helping me out! It turns out I forgot to write

module.exports = ProviderDashboard; 

Also in my other components :P So my require calls returned empty objects.

[ryanflorence]

np

[justin808]

Easy to hit this one. Would be neat if there was a way to give a better error message, or maybe a hint.

[justin808]

@ryanflorence Here's a more detailed writeup of what I hit:

http://forum.railsonmaui.com/t/uncaught-typeerror-object-is-not-a-function-react-router/249

[saran110313]

fabric.util.loadImage( ' ../sample.png' , function(img){ }); Uncaught TypeError: object.render is not a function fabric.StaticCanvas.fabric.util.createClass._onObjectAdded @ fabric.js:6378 fabric.Collection.add @ fabric.js:198 this image object move and not add the modify object on client side in image function. how to solve this function...

[saran110313]

abric.util.loadImage( ' ../sample.png' , function(img){ }); Uncaught TypeError: object.render is not a function fabric.StaticCanvas.fabric.util.createClass._onObjectAdded @ fabric.js:6378 fabric.Collection.add @ fabric.js:198 this image object move and not add the modify object on client side in image function. how to solve this function...

Uncaught TypeError: object.render is not a function fabric.StaticCanvas.fabric.util.createClass._draw @fabric.js:6358 fabric.StaticCanvas.fabric.util.createClass._renderObjects @ fabric.js:6496 fabric.StaticCanvas.fabric.util.createClass.renderAll @ fabric.js:6467 fabric.util.object.extend._transformObject @ fabric.js:9656 fabric.util.object.extend.__onMouseMove @ fabric.js:9635 fabric.util.object.extend._onMouseMove @ fabric.js:9270