exporting multiple modules in react.js

Question

New to react.js and trying to following tutorial. Unfortunately the code given in the page didn't work. webpack complained

ERROR in ./App.jsx Module build failed: SyntaxError: Only one default export allowed per module. 

Wonder how to fix it. Thanks.

=== App.jsx====

import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'  class App extends React.Component {    render() {       return (          <div>             <ul>                <li><Link to = "/home">Home</Link></li>                <li><Link to = "/about">About</Link></li>                <li><Link to = "/contact">Contact</Link></li>             </ul>             {this.props.children}          </div>       )    } }  export default App;  class Home extends React.Component {    render() {       return (          <div>             <h1>Home...</h1>          </div>       )    } }  export default Home;  class About extends React.Component {    render() {       return (          <div>             <h1>About...</h1>          </div>       )    } }  export default About;  class Contact extends React.Component {    render() {       return (          <div>             <h1>Contact...</h1>          </div>       )    } }  export default Contact; 

=== main.js ===

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx';  ReactDOM.render(<App/>, document.getElementById('app')); 

UPDATE1

I commented out all the export default and added the following at the end

module.exports = {     App: App,     Home: Home,     About: About,     Contact: Contact } 

Now there is no compile error but the web page is a blank. I am not sure what is wrong here.

Answer 1

You can have only one default export which you declare like:

export default App; or export default class App extends React.Component {...

and later do import App from './App'

If you want to export something more you can use named exports which you declare without default keyword like:

export {   About,   Contact, } 

or:

export About; export Contact; 

or:

export const About = class About extends React.Component {.... export const Contact = () => (<div> ... </div>); 

and later you import them like:

import App, { About, Contact } from './App'; 

EDIT:

There is a mistake in the tutorial as it is not possible to make 3 default exports in the same main.js file. Other than that why export anything if it is no used outside the file?. Correct main.js :

import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'  class App extends React.Component { ... }  class Home extends React.Component { ... }   class About extends React.Component { ... }   class Contact extends React.Component { ... }   ReactDOM.render((    <Router history = {browserHistory}>       <Route path = "/" component = {App}>          <IndexRoute component = {Home} />          <Route path = "home" component = {Home} />          <Route path = "about" component = {About} />          <Route path = "contact" component = {Contact} />       </Route>    </Router>  ), document.getElementById('app')) 

EDIT2:

another thing is that this tutorial is based on react-router-V3 which has different api than v4.

Answer 2

When you

import App from './App.jsx'; 

That means it will import whatever you export default. You can rename App class inside App.jsx to whatever you want as long as you export default it will work but you can only have one export default.

So you only need to export default App and you don't need to export the rest.

If you still want to export the rest of the components, you will need named export.

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export