Attempted import error 'X' is not exported from [Solved]

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
3 min

banner

# Attempted import error 'X' is not exported from

The React.js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file.

To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports.

attempted import error not exported from

Here is an example of how the error occurs. This is a file that exports a function.

another-file.js
// ๐Ÿ‘‡๏ธ Note: default export export default function sum(a, b) { return a + b; }

And this is our index.js file where we import the function.

index.js
// โ›”๏ธ Attempted import error: 'sum' is // not exported from './another-file'. // ๐Ÿ‘‡๏ธ Note: using named import import {sum} from './another-file'; console.log(sum(5, 10));

Notice that in another-file.js we used a default export and in the index.js file we used a named import. This is the reason the error occurs.

To solve the error, make sure:

  1. To wrap named exports in curly braces when importing them
  2. Use the default keyword when exporting a value as a default export
  3. Each module only has a maximum of 1 default export but could have multiple named exports

# Solve the error using named exports

Here is an example of how to solve the error using a named export.

another-file.js
// ๐Ÿ‘‡๏ธ Using named export export function sum(a, b) { return a + b; }

And import the function in the index.js file.

index.js
// ๐Ÿ‘‡๏ธ Using named import import {sum} from './another-file'; console.log(sum(5, 10));

Notice that we don't use the default keyword for named exports and wrap a named import in curly braces.

You can have multiple named exports per file, but you can only have one default export.

# Solve the error using a default export

Here is an example of how to solve the error using default export and import.

another-file.js
// ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And now we use a default import in the index.js file.

index.js
// ๐Ÿ‘‡๏ธ default import import sum from './another-file'; console.log(sum(5, 10));

Notice that we do not use curly braces when working with default imports.

You can have a maximum of 1 default export per file.

If you are exporting a variable as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

index.js
// ๐Ÿ‘‡๏ธ default export const example = 'hello world'; export default example;

You can also mix and match, here's an example.

another-file.js
// ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; } // ๐Ÿ‘‡๏ธ named export export const num = 15;

And here are the imports.

index.js
// ๐Ÿ‘‡๏ธ default and named imports import sum, {num} from './another-file'; console.log(sum(num, 10));

We used a default import to import the sum function and a named import to import the num variable.

# Conclusion

To solve the error, be consistent with your ES6 imports and exports.

If a value is exported as a default export, it has to be imported as a default import and if it's exported as a named export, it has to be imported as a named import.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev