0

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')
);
Zea Lith
  • 421
  • 1
  • 7
  • 15
  • Possible duplicate of [in reactjs, when should I add brackets when import](https://stackoverflow.com/questions/41337709/in-reactjs-when-should-i-add-brackets-when-import) – Shubham Khatri Jun 27 '17 at 14:04

1 Answers1

1

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;
rossipedia
  • 56,800
  • 10
  • 90
  • 93
  • you're right, I was doing require('Countdown'), ouch I must be consistent, tried import, it worked. Thansk! – Zea Lith Jun 27 '17 at 13:59