CODEWITHSUNDEEP
components
Hasitha Yapa
Hasitha Yapa

Reputation: 141

ReactJS Error : Only one default export allowed per module

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.

Upvotes: 14

Views: 52461

Answers (7)

Bilal Shafqat
Bilal Shafqat

Reputation: 1

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" };
}

Upvotes: 0

Muhammad Talha
Muhammad Talha

Reputation: 459

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';

Upvotes: 1

Anmol Middha
Anmol Middha

Reputation: 97

export all the components in one line

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

Upvotes: 3

Jerry Chong
Jerry Chong

Reputation: 9220

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.

Upvotes: 0

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8635

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".

Upvotes: 4

Rohit Kumar
Rohit Kumar

Reputation: 66

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>
    )
  }
}

Upvotes: 3

webx
webx

Reputation: 985

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

Upvotes: 19

Related Questions