Solve - Attempted import error 'X' is not exported from

avatar

Borislav Hadzhiev

Last updated: Feb 22, 2022

banner

Photo from Unsplash

Solve - 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 "Attempted import error 'X' is not exported from", 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

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.

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.

To solve the "Attempted import error 'X' is not exported from" 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.

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.