Only one default export allowed per module

The error “Only one default export allowed per module in React” happens when you have multiple default exports in a javascript file. To solve this error, change the second default export to named export or move it into a another file.

Please look at the below code to understand how this error occurs.

export default function FirstComponent(){
    return <p>First Component</p>
}
// This line throws the error
export default function SecondComponent(){
    return <p>Second Component</p>
}

You can see in the above code, there are two default exports from a single file which is not allowed in javascript. Thus this error has occurred.

Change the second default export to the named export

To solve this error you can change the second default export to named export. Please look at the below code.

export default function FirstComponent(){
    return <p>First Component</p>
}

export function SecondComponent(){ // keyword 'default' was removed from this line
    return <p>Second Component</p>
}

In the above code, we have removed the keyword ‘default’ from the SecondComponent and it became a named export.

Now, the FirstComponent is the default export and SecondComponent is a named export in this single file.

The default exported function can be imported with any name you like. But when importing named functions, the function name should be exactly the same as the name in which they are exported and it should be inside a curly brackets { }. The below code will give you a better understanding.

import FirstComponent, { SecondComponent } from "./MyComponent";

Change both the default export to the named export

As an alternative solution, you can change both default export into the named export as given below.

export function FirstComponent(){
    return <p>First Component</p>
}

export function SecondComponent(){
    return <p>Second Component</p>
}

You can import all the named imports as:

import  { FirstComponent, SecondComponent} from "./MyComponent";

This is the best and recommended solution for this error.

Most real-world application codebases use named exports and imports because it is easier for your IDE for auto-completion and auto-imports. Read more about default and named exports.

As another solution for this error, move the second default export to another file.

Conclusion

The error "Only one default export allowed per module" happens when more than one default export is in a javascript file. To solve this error you can change the second default export into named export or you can change all functions into named exports. Otherways you can move the second default export to another file.