reactjs router cannot read render of undefined

Question

I'm putting together my first react based app. I had a working application and have since woven in the react router. I am transpiling with babel.

I get the following the the developer console in chrome -

Uncaught TypeError: Cannot read property 'render' of undefined
at Object.1../components/Login (http://localhost:8000/bundle.js:90:19)
at s (http://localhost:8000/bundle.js:1:254)
at e (http://localhost:8000/bundle.js:1:425)
at http://localhost:8000/bundle.js:1:443

I have the following component at components/Login.js

import React, { Component } from 'react';

class Login extends React.Component {
render() {
    return (
        <nav>
            <ul>
                <li><a href="#">Sign Up Now</a></li>
                <li><a className="button button-primary" href="#">Sign In</a></li>
            </ul>
        </nav>
    );
}
}
export default Login

Within my app.js I have the following -

'use strict';

import React from 'react';
import { ReactDOM, render } from 'react-dom';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router';

import {Login} from './components/Login';

const App = React.createClass({

  render() {
    return (
      <div>

        <h2>Title</h2>
        <Options/>

      </div>
    )
  }
})



const Logout = React.createClass({

  render() {
    return <p>You are now logged out</p>
  }

})

const Profile = React.createClass({
  render() {
    //const token = auth.getToken()

    return (
      <div>
        <h1>Profile</h1>
        <p>You made it!</p>
        //<p>{token}</p>
      </div>
    )
  }
})

function requireAuth() {
    console.log("here");
}

ReactDOM.render((   
    <Router>
        <Route path="/" component={App}>
            <Route path="login" component={Login} />
            <Route path="logout" component={Logout} />
            <Route path="profile" component={Profile} onEnter={requireAuth} />
        </Route>
    </Router>
), document.getElementById('app'));

I believe my error to be in the way in which I am export/ importing my components as the error exists with another component and when I change which is imported first in the above the error falls to that component.

I've tried various things such as adding {} to the import, adding default to the export and adding other imports into the component such as react-dom.

I'm building using the following

babel -presents react,es2015 js/source -d js/build
browserify js/build/app.js -o bundle.js 
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
date; echo;

Can anyone advise - I've been on this for 3 evenings now. I just don't get why render is undefined when it previously worked when using without the router.

Drew Schuster · Accepted Answer · 2016-12-30 23:32:13Z

1

Does changing the Login import line to import Login from './components/Login'; fix it?

answered Dec 30, 2016 at 23:32

Drew Schuster

2,69115 silver badges16 bronze badges

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

1 Comment

gadgetlab Over a year ago

I tried it previously, and I've tried again to be certain but it is still producing the same error. Perhaps something in my environment?

gadgetlab · Accepted Answer · 2016-12-31 13:39:40Z

1

Changing

import ReactDOM, { render } from 'react-dom';

to

import { ReactDOM, render } from 'react-dom';

Did the trick - I also hadn't set a browserhistory in the router which caused a secondary fault.

answered Dec 31, 2016 at 13:39

gadgetlab

635 bronze badges

Comments

KA01 · Accepted Answer · 2016-12-31 03:59:01Z

0

Change import {Login} from './components/Login'; to import Login from './components/Login';. Remember that when exporting something with default you don't need to include the {}.

answered Dec 31, 2016 at 3:59

KA01

4,2513 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

reactjs router cannot read render of undefined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related