Warning: Failed propType: Invalid prop `component` supplied to `Route`

Question

I'm trying new react-router 1.0.0 and I'm getting strange warnings I can't explain:

Warning: Failed propType: Invalid prop `component` supplied to `Route`.

Warning: Invalid undefined `component` supplied to `Route`.

The app is simple:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router';

import App from './components/app';

var Speaker = require('./components/speaker');

ReactDOM.render((
    <Router>
      <Route path="/" component={App}>
        // This is the source of the warning:
        <Route path="speaker" component={ Speaker }/>
      </Route>
    </Router>
), document.getElementById('react-container'));

speaker.jsx:

import React from 'react';

var Speaker = React.createClass({
  render() {
    return (
        <h1>Speaker</h1>
    )
  }
});

module.exoprts = Speaker;

app.jsx only has the following render() function:

render() {
    return (
        <div>
            <Header title={this.state.title} status={this.state.status} />

            {this.props.children}
        </div>);
}

When I type in the route to #/speaker or #speaker - nothing is displayed except for title. Please help.

Is it a typo in your code or question, module.exoprts? Also why are you mixing ES6 with ES5? Use imports everywhere instead of doing require — Henrik Andersson
Wow! Just wow! This was it! I spent 50 minutes googling, trying different import styles - ES5 and ES6, but it was a simple typo. Thank you very much @limelights! You're the boss! — Alex Kovshovik
Keeping to one style will reduce these errors in the future, glad it worked! — Henrik Andersson
I promise I will keep one style going forward :) Would even use "class DaDum" instead of React.createClass({}). Thanks again! — Alex Kovshovik
In my case with ES2015, I simply forgot the export line altogether. — Tyler Collier

Dan Prince Dan Prince · Accepted Answer · 2015-11-27T08:36:21

Standardize your module's imports and exports then you won't risk hitting problems with misspelled property names.

module.exports = Component should become export default Component.

CommonJS uses module.exports as a convention, however, this means that you are just working with a regular Javascript object and you are able to set the value of any key you want (whether that's exports, exoprts or exprots). There are no runtime or compile-time checks to tell you that you've messed up.

If you use ES6 (ES2015) syntax instead, then you are working with syntax and keywords. If you accidentally type exoprt default Component then it will give you a compile error to let you know.

In your case, you can simplify the Speaker component.

import React from 'react';

export default React.createClass({
  render() {
    return (
      <h1>Speaker</h1>
    )
  }
});

Warning: Failed propType: Invalid prop `component` supplied to `Route`

11 Answers