Does not contain a default export error in React.js – How to fix it?

This article will show you how to fix the “Does not contain a default export” error in React.js by double-checking how you import or export the component. Let’s go into detail now.

The cause of “Does not contain a default export” error in React.js

First, we will come to the reason that this error occurs with a simple example below.

Code:

import React from 'react';
import multiply from './Multiply'
 
const App = () => {
  return (
    <>
     <h2>Does not contain a default export Error in React.js | LearnShareIT</h2>
     <hr/>
     <h3>10 x 10={multiply(10,10)}</h3>
  </>
  );
};
 
export default App;

export function multiply(a,b) {
    return a*b;
}

Output:

When you import the Button child component into the App component, the program gives an “Does not contain a default export” error when compiled.

Let’s see some ways to solve this problem in the next part of the article.

How to fix this error?

Checking how you import component

The import statement binds the file to the functions of the exported file.

Javascript – export & import has 2 types: by default (default) and by name (name). Let’s look at each form to understand this export better.

And import also has two ways to import a component: import default and import by name. We are using the import-by-name method in the error code, which may be the reason for the error.

Code:

import multiply from './Multiply'

Change to:

import {multiply} from './Multiply'

Output:

This way, we could import default components, usually between components, and we can avoid errors.

Checking how you export the component

This debugging method will work if your code is exporting the wrong way and the program cannot import the component. Just like the error described, when compiled, webpack realized that your component was not being exported by default.

Code:

export function multiply(a, b)

Change to:

export default function multiply(a, b)

When you use the export default function multiply method, the “Does not contain a default export” error will be fixed, and the result returned to the screen will be the same as the first method. Hope these methods will be helpful to you.

Summary

In different cases, the article has shown you two ways to fix the “Does not contain a default export” error in React.js. Each method is used in different error cases. Please use the methods flexibly. Good luck for you.

Maybe you are interested:

• Unexpected default export of anonymous function
• Export ‘usehistory’ was not found in react-router-dom

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs