When you try to import a prop, a function, etc… from a file, you may get the error “Attempted import error ‘#’ is not exported from”. It occurs because you imported it in a wrong way or you put in a wrong name. Let’s go into detail.
What causes error “Attempted import error ‘#’ is not exported from”
The error “Attempted imported error ‘#’ is not exported from” happens when you try to import a name that does not exist in your file. To solve this problem, you should check the name of the export file and remember that make sure not to blend the named or default exports and imports.
Example of how the error happens:
export default function Infor(pros) {
return (
<ul>
<li>{pros.name}</li>
<li> {pros.age}</li>
<li>{pros.country}</li>
</ul>
);
}import "./App.css";
import { Infor } from "./infor";
console.log(Infor("Togban", 18, "VietNam"));
const App = () => {
return <Infor></Infor>;
};
export default App;Error :
Failed to compile.
Attempted import error: 'Infor' is not exported from './infor' (imported as 'Infor').Solutions for this error
Solution 1: Remove curly braces
When you use default export, remember don’t use curly braces surrounding the name.
Example :
export default function Infor(pros) {
return (
<ul>
<li>{pros.name}</li>
<li> {pros.age}</li>
<li>{pros.country}</li>
</ul>
);
}Or something like this:
function Infor(pros) {
return (
<ul>
<li>{pros.name}</li>
<li> {pros.age}</li>
<li>{pros.country}</li>
</ul>
);
}
export default Infor;import "./App.css";
import Infor from "./infor";
const App = () => {
return <Infor name={"Togban"} age={18} country={"VietNam"}></Infor>;
};
export default App;Output :
Solution 2: Export a particular function
In this solution, you will export a particular function, but in the import file you have to make sure that you write the correct name.
Example :
function Infor(pros) {
return (
<ul>
<li>{pros.name}</li>
<li> {pros.age}</li>
<li>{pros.country}</li>
</ul>
);
}
export { Infor };import "./App.css";
import { Infor } from "./infor";
const App = () => {
return <Infor name={"Togban"} age={18} country={"VietNam"}></Infor>;
};
export default App;Summary
In this tutorial, I’ve shown and explained how to resolve the error “Attempted import error ‘#’ is not exported from”. You should check the way you import or export your variable and function. Thanks for reading!
Maybe you are interested:
- Type is missing the following properties from type
- Module not found: can’t resolve ‘#’ error in react
- You cannot render a Router inside another Router
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm