CODEWITHSUNDEEP
reactjs
packetie
packetie

Reputation: 5069

exporting multiple modules in react.js

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.

Upvotes: 101

Views: 259350

Answers (4)

Taufan Arif
Taufan Arif

Reputation: 460

if you want to use export default then it should be in separated files because export default can only be used once for one file, here is the example App.jsx file:

import React from 'react';
import { Link } 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;

do this for the rest of the files, Home.jsx, About.jsx, Contact.jsx with the same pattern.

but if you want it inside one file you can use export instead like this:

import React from 'react';
import { Link } from 'react-router'

export 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 class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

export class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}

Upvotes: 2

Deepak Thakare
Deepak Thakare

Reputation: 31

The main issue is that you have used more than one export default keyword.

You could use:

 export default App
 export {home}
 etc etc

Upvotes: 3

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

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.

Upvotes: 205

iboss
iboss

Reputation: 486

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

Upvotes: 6

Related Questions