CODEWITHSUNDEEP
reactjsecmascript-6
Zea Lith
Zea Lith

Reputation: 421

Invalid prop 'component' supplied to 'route'" using export default es6

Below is my working component

const Countdown = () => {
    return(
        <p>Countdown.jsx</p>
    )
}

module.exports = Countdown //working

But when I replace module.exports = Countdown with export default Countdown I got error of Invalid prop 'component' supplied to 'route'? I have babel and other es6 feature is working.

The way I use my Countdown component like this

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Main}>
        <Route path="countdown" component={Countdown} />
    </Route>
  </Router>,
  document.getElementById('app')
);

Upvotes: 0

Views: 503

Answers (1)

rossipedia
rossipedia

Reputation: 59377

It depends on how you're importing the component. module.exports = Component is not the same as export default Component. When you do export default, you create a named export with the name default.

In ES modules you can import the default export like so:

import Component from './module';

In CommonJS modules, however, you have to reference the default export explicitly:

const Component = require('./module').default;

Upvotes: 1

Related Questions