ReactJS Error : Only one default export allowed per module

Question

This multiple component doesn't work;

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>Home</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;

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
      </Route>
   </Router>

), document.getElementById('app'))

It give a below error;

ERROR in ./main.js Module build failed: SyntaxError: C:/Users/hasithay/Desktop/reactApp/main.js: Only one default export allowed per module.

31 | } 32 |

33 | export default Home; | ^ 34 | 35 | class About extends React.Component { 36 | render() {

@ multi main webpack: bundle is now VALID

Answer should be three clickable links that can be used to change the route When the app is started.

Well the error tells you exactly what's wrong. You can't have multiple default exports per file. You only need to export stuff if you're importing something in a different file. If you're accessing the component in the same file, there's no need to export anything. — azium
– azium, Commented Sep 7, 2016 at 5:50

webx · Accepted Answer · 2016-09-28 12:55:22Z

Multiple component does work but you need to export the component with name and you can only export one default component.

Like in below expample I export the App Component as defalut component and other component Home, About, Contact as a named component.

For the named component you need to import them using there name :

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

import default component:

import App from './App.jsx';

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;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



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


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

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Contact} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

	
), document.getElementById('app'));

Don't import default component (App Component) with the name component (Home, About, Contact). if you import them with the named component they didn't render properly.

Blockquote

In case folks are wondering why this doesn't work with React Router v 4.0 they rewrote it. For more information: github.com/ReactTraining/react-router/issues/4732

Mahdieh Shavandi · Accepted Answer · 2018-02-28 12:29:34Z

4

you have one line with the code:

export default App;

After some other lines you have the code:

export default Home;

That's just the problem! you have used export default 2 times in one file. you have to change one of them to solve the problem.

"you cannot use export default more than one time in a file".

answered Feb 28, 2018 at 12:29

Mahdieh Shavandi

8,6551 gold badge39 silver badges49 bronze badges

Comments

Rohit Kumar · Accepted Answer · 2016-11-04 08:04:14Z

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;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



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


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

Anmol Middha · Accepted Answer · 2018-11-11 04:57:48Z

3

export all the components in one line

export default {App, Home, Contacts, About};

answered Nov 11, 2018 at 4:57

Anmol Middha

971 silver badge9 bronze badges

Comments

MaartenDev · Accepted Answer · 2019-09-01 10:01:09Z

1

Export Default Home is used to Expose any module to use in other files, but only one component is a default not all. A module can only be exported once. You are using the same statement to export each component which is unnecessary.

Importing components using this statement

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

edited Sep 1, 2019 at 10:01

MaartenDev

5,8315 gold badges23 silver badges36 bronze badges

answered Sep 1, 2019 at 9:23

Muhammad Talha

4694 silver badges6 bronze badges

Comments

Jerry Chong · Accepted Answer · 2018-09-16 15:16:23Z

0

You need to remove default keywords on both App and Home classes, as per code below:

export App;
export Home;

default keywords is only use when you want to export ONE class.

answered Sep 16, 2018 at 15:16

Jerry Chong

9,4504 gold badges54 silver badges44 bronze badges

Comments

Bilal Shafqat · Accepted Answer · 2024-08-13 06:39:10Z

0

I got the same issue using redux because I use

export default function increment() {
  return { type: "INCREMENT" };
}
export default function decrement() {
  return { type: "DECREMENT" };
}
export default function reset() {
  return { type: "RESET" };
}

When I remove the default, it works.

export function increment() {
  return { type: "INCREMENT" };
}
export function decrement() {
  return { type: "DECREMENT" };
}
export function reset() {
  return { type: "RESET" };
}

answered Aug 13, 2024 at 6:39

Bilal Shafqat

11 bronze badge

Collectives™ on Stack Overflow

ReactJS Error : Only one default export allowed per module

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related