Problem

In ReactJS, the error " x is not exported from ./x (imported as y)" occurs when we perform a named and/or a default import from a file that doesn't have a named and/or a default export. Let me demonstrate that with some examples.

What is a default export?

We will create a react functional component with a default export in the file "./sample.js":

export default function Sample() {
  return <div>sample</div>;
}

A default export is done by adding the default keyword along with an export keyword to a function definition as shown in the above code. We can access this component from another file by simply referencing the file with any name since a function is exported by default.

import SampleDefault from "./sample";

What is a named export?

In the case where we create a functional component with only the export keyword to the function's definition. It is said to be a named export. Since there is no default keyword, we have to specify the exact name to import it into another file

export function Sample() {
  return <div>sample</div>;
}

We omitted the default keyword in the above code. 

import { Sample } from "./sample";

To import it, we need to use curly braces with the exact name of the function inside it. This is how we import named export.

Occurrence of error

As you might have guessed, the mentioned error "x is not exported from ./x (imported as y)" occurs when you define a default export and import it using the syntax of named export or vice versa.

export default function Sample() {
  return <div>sample</div>;
}
import { Sample } from "./sample";  
//export 'Sample' (imported as 'Sample')  👈 
//was not found in './sample'(possible  👈
//exports: default)  👈

In the above code, we tried to import a default export with the named import "{ Sample }", which resulted in an error.

Solution

In order to solve the error or to make sure it never happens, follow these rules:

  1. Wrap the named imports in curly braces '{ }'
  2. Make sure to add the default keyword to exports that are supposed to be imported by default
  3. Each module can have only one default export, but several named exports.

In the following code inside a single file, we have created multiple exports, both default and named. 

export default function Sample() {
  return <div>sample</div>;
}

export const amount = 500
export const firstName = "Sharooq"

We will import the exports in the above file as:

import Sample, {amount, firstName} from "./sample";

"Sample" is the default import, and "amount" and "firstName" are named imports.

When exporting variables, you need to write two seperate lines. one for defining the variable and another for exporting. You cannot define and default export a variable in single line. Otherwise it will result in an error "Only expressions, functions or classes are allowed as the default export."
export default const amount = 500;
//Only expressions, functions or classes   👈
//are allowed as the default export.   👈

The right way of exporting default variables is as follows:

const amount = 500;
export default amount;

Best practices

It's a best practice to stick with one method of exporting and importing modules throughout a project. This will ensure consistency and convenience across the codebase.