1

I'm trying to get the react-router up and running, but somehow React is not defined within react-router and because of that fails with the error

Uncaught TypeError: Cannot read property 'createClass' of undefined

I'm also getting this error later:

Uncaught Error: Load timeout for modules: jsx!testapp_unnormalized2,jsx!testapp

Any idea of what I'm doing wrong here? I simply want to get the router working without concatenating all the files.

This is how the app looks:

index.html

<!-- ... -->

    <script data-main="../resources/js/init" src="../resources/bower_components/requirejs/require.js"></script>

</body>

<!-- ... -->

init.js

require.config({

  paths: {
    react: "/resources/bower_components/react/react-with-addons",
    JSXTransformer: "/resources/bower_components/jsx-requirejs-plugin/js/JSXTransformer",
    jsx: "/resources/bower_components/jsx-requirejs-plugin/js/jsx",
    jquery : "/resources/bower_components/jquery/dist/jquery",
    'react-router' : "/resources/bower_components/react-router/dist/react-router",
    'react-router-shim': 'react-router-shim'
  },

  shim : {

    'react-router': {
      deps:    ['react'],
      exports: 'Router'
    }
  },
});

require(['jsx!testapp'], function(App){
  var app = new App();
  app.init();
});

react-router-shim.js

define(['react'], function(React) {
  "use strict";

  window.React = React;
});

testapp.js

define(function(require){
  var React = require('react');
  var Router = require('react-router');

  var Route = Router.Route;
  var NotFoundRoute = Router.NotFoundRoute;
  var DefaultRoute = Router.DefaultRoute;
  var Link = Router.Link;
  var RouteHandler = Router.RouteHandler;

  var routes = (
    <Route handler={Home} path="/">
      <DefaultRoute handler={Home} />
    </Route>
  );

  var Home = React.createClass({
    render: function() {
      return(
        <p>This is the mathias page</p>
      );
    }
  });

  var App;

  App.init = function () {
    Router.run(routes, Router.HistoryLocation, function (Handler) {
      React.render(<Handler/>, document.getElementById('content'));
    });
  };

  return App;

});

1 Answer 1

1

react-router doesn't support AMD and thus won't load the React dependency by default. Instead, you should load React first and set it as a global (window.React = React), or use the RequireJS shim configuration to load React as a global.

See react-router#171 for more discussion around react-router and AMD.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.