Parsing error only one default export allowed per module

This article will tell you the reason for the “Only one default export allowed per module” in React error and two methods to fix it like removing the export default or using the class component method. Let’s go into detail now.

When does the error “Only one default export allowed per module” in React happen?

There is only one default export per module. Export default can be a function, a class, an object, or anything else. This value is considered the main export value because it is the simplest to import.

Code:

import React from 'react';
 
const App = () => {
   return (
    <>
    <h2>Only one default export allowed per module in React | LearnShareIT</h2>
    </>
  )
}
 
export default App;
const Home = () => {
  return (
    <>
     <h2>This is Home component</h2>
    </>
  );
};
 
export default Home;

Output:

This error will appear when you export default more than once in a component, webpack will recognize it and give you a warning.

How to fix this error?

Removing the export default method

As described in the warning, each module in React can only have one default export, so we will remove the default export from your module that is failing.

Code:

import React from 'react';
 
const App = () => {
   return (
    <>
    <h2>Only one default export allowed per module in React | LearnShareIT</h2>
    <Home/>
    </>
  )
}
 
export default App;
export const Home = () => {
  return (
    <>
     <h2>This is Home component</h2>
    </>
  );
};

Output:

Once you removed the export default from the component, you were able to import the Home component into the App component and render it to the screen without the “Only one default export allowed per module” error.

Using the export class method

ES6 classes make up class components. In addition to having, they have: a life-cycle, the render() function, the constructor, and state (data) management.

A component of a React class is:

• An ES6 class, it will be a part when it “acquires” Respond part.
• Can acquire props if required (in the constructor).
• Can keep its data and state together
• A render() method that returns a React element (JSX) or null is required.

Code:

import React from 'react';
class App extends React.Component {
  render() {
    return(
      <>
      <h2>Only one default export allowed per module in React | LearnShareIT</h2>
      <hr/>
      <Home/>
      <About/>
      </>
    )
  }
}
 
export default App;
 
 class Home extends React.Component {
  render() {
    return (
      <h3>This is Home class</h3>
    )
  }
}
class About extends React.Component {
  render() {
    return (
      <h3>This is About class</h3>
    )
  }
}

Output:

We can use export class Name extends React.Component to create the components we need to export and can avoid the warning “only one default export allowed per module” in React. Wish you success with the above methods.

Summary

To summarize, we have known what causes the “Only one default export allowed per module” in React and how we can fix it. We hope you like this article.

Maybe you are interested:

• Unexpected default export of anonymous function
• Does not contain a default export Error in React.js
• Export ‘usehistory’ was not found in react-router-dom

import React from «react»;

import { Doughnut } from «react-chartjs-2»;

import { MDBContainer } from «mdbreact»;

export class ChartsPage extends React.Component {

state = {

dataDoughnut: {

labels: [«Red», «Green», «Yellow», «Grey», «Dark Grey»],

datasets: [

{

data: [300, 50, 100, 40, 120],

backgroundColor: [«#F7464A», «#46BFBD», «#FDB45C», «#949FB1», «#4D5360»],

hoverBackgroundColor: [

«#FF5A5E»,

«#5AD3D1»,

«#FFC870»,

«#A8B3C5»,

«#616774»

]

}

]

}

}

render() {

return (

<MDBContainer>

<h3 className=»mt-5″>Radar chart</h3>

<Doughnut data={this.state.dataDoughnut} options={{ responsive: true }} />

</MDBContainer>

);

}

}

export default ChartsPage;

import React, { Component } from «react»;

import { Carousel, CarouselCaption, CarouselInner, CarouselItem, View, Mask } from «mdbreact»;

class CarouselPage extends Component {

render() {

return (

<Carousel activeItem={1} length={4} showControls={true} showIndicators={true} className=»z-depth-1″>

<CarouselInner>

<CarouselItem itemId=»1″>

<View>

<img className=»d-block w-100″ src=»https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg» alt=»First slide» />

<Mask overlay=»black-light» />

</View>

<CarouselCaption>

<h3 className=»h3-responsive»>Light mask</h3>

<p>First text</p>

</CarouselCaption>

</CarouselItem>

<CarouselItem itemId=»2″>

<View>

<img className=»d-block w-100″ src=»https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg» alt=»Second slide» />

<Mask overlay=»black-strong» />

</View>

<CarouselCaption>

<h3 className=»h3-responsive»>Strong mask</h3>

<p>Second text</p>

</CarouselCaption>

</CarouselItem>

<CarouselItem itemId=»3″>

<View>

<img className=»d-block w-100″ src=»https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg» alt=»Third slide» />

<Mask overlay=»black-slight» />

</View>

<CarouselCaption>

<h3 className=»h3-responsive»>Slight mask</h3>

<p>Third text</p>

</CarouselCaption>

</CarouselItem>

<CarouselItem itemId=»4″>

<View>

<img className=»d-block w-100″ src=»https://mdbootstrap.com/img/Photos/Slides/img%20%28143%29.jpg» alt=»Mattonit’s item» />

<Mask overlay=»black-light» />

</View>

<CarouselCaption>

<h3 className=»h3-responsive»>Sopot Beach</h3>

<p>Taken june 21th by @mattonit</p>

</CarouselCaption>

</CarouselItem>

</CarouselInner>

</Carousel>

);

}

}

export default CarouselPage;