JIYIK CN >

React.js “Attempted import error 'X' is not exported from” error occurs when we try to import a named import that does not exist in the specified file. To resolve the error, make sure that the module has named exports and that you are not mixing named exports with default exports and imports.

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

// 注意: default export
export default function sum(a, b) {
  return a + b;
}

Here is the index.js file where we import the function.

// Attempted import error: 'sum' is not exported from './another-file'.
// 注意: 使用 name 导入
import {sum} from './another-file';

console.log(sum(5, 10));

Notice that in another-file.js we used default export, whereas in index.js file we used named import. That’s why the error occurred.

To resolve the error "Attempted import error 'X' is not exported from", make sure:

1. Wrap them in curly braces when importing name exports
2. Use the default keyword when exporting a value as the default export
3. Each module can have at most one default export, but can have multiple named exports

Here is an example of how to resolve the error using named exports.

// 使用命名导出
export function sum(a, b) {
  return a + b;
}

And import the function in index.js file.

// 使用命名导入
import {sum} from './another-file';

console.log(sum(5, 10));

Note that we did not use the default keyword for the named export, but instead enclosed the named import in curly braces.

Each file can have multiple named exports, but only one default export.

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

// default 导出
export default function sum(a, b) {
  return a + b;
}

Now we use the default import in our index.js file.

// default 导入
import sum from './another-file';

console.log(sum(5, 10));

Note that we don't use curly braces when using the default import.

Each file can have at most 1 default export.

If you want to export a variable as a default export, you must declare it on the first line and export it on the next line. You cannot declare and default export a variable on the same line.

// 默认导出
const example = 'hello world';

export default example;

We can also mix and match, here is an example.

// default 导出
export default function sum(a, b) {
  return a + b;
}

// 命名导出
export const num = 15;

Below are multiple imports.

// 默认和命名导入
import sum, {num} from './another-file';

console.log(sum(num, 10));

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

To resolve the “Attempted import error 'X' is not exported from ” error, be consistent with ES6 imports and exports. If a value is exported as a default export, it must be imported as a default import, and if it is exported as a named export, it must be imported as a named import.