CODEWITHSUNDEEP
reactjsreact-router
varad
varad

Reputation: 8029

react router require is not defined

I have a home.js like :

 import React from 'react'
    import { render } from 'react-dom'
    import { Router, Route, Link, browserHistory } from 'react-router'
    import Login from 'login.js';

var App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

render((  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={Login}/>
  </Route>
), document.body)

and login.js like :

 import React from 'react';

var Login = React.createClass({ 

  render() {
    return(<div>Welcome to login</div>);
  }
});

export default Login;

and my home.html:

 <html lang="en">  
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
  </head>
  <body>
    <section id="react"></section>
    <script src="../build/react.js"></script>
    <script src="../build/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
    <script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
    <script type="text/babel" src="js/home.js"></script>
  </body>
</html>

when I run it gives me Uncaught exception require is not defined

Need help..

Upvotes: 2

Views: 1199

Answers (1)

jolyonruss
jolyonruss

Reputation: 1840

From the getting started guide

We recommend using React with a CommonJS module system like browserify or webpack.

Even if you files are saved as .js they need to be compiled into a bundle in order for the classes to be accessible to each other.

I might be worth taking a look at some of the boilerplate and starter kits for React, this is a good example.

Upvotes: 2

Related Questions