Home does not contain an export named Home
Solution 1
The error is telling you that you are importing incorrectly. Here's the code you have to add:
import { Home } from './layouts/Home';
This is incorrect because you're exporting as the default export, not as a named export. Check this line:
export default Home;
You're exporting as default, not as a name. Thus, import Home
like this:
import Home from './layouts/Home';
Notice there are no curly brackets. Further reading on import
and export
.
Solution 2
Use
import Home from './layouts/Home'
rather than
import { Home } from './layouts/Home'
Remove {}
from Home
Solution 3
This is a case where you mixed up default exports and named exports.
When dealing with the named
exports, if you try to import them you should use curly braces as below,
import { Home } from './layouts/Home'; // if the Home is a named export
In your case the Home was exported as a default one. This is the one that will get imported from the module, when you don’t specify a certain name of a certain piece of code. When you import, and omit the curly braces, it will look for the default export in the module you’re importing from. So your import should be,
import Home from './layouts/Home'; // if the Home is a default export
Some references to look :
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
- https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0
Solution 4
I just ran into this error message (after upgrading to nextjs 9 some transpiled imports started giving this error). I managed to fix them using syntax like this:
import * as Home from './layouts/Home';
Solution 5
We also can use
import { Home } from './layouts/Home';
using export keyword before class keyword.
export class Home extends React.Component{
render(){
........
}
}
For default
import Home from './layouts/Home';
Default export class
export default class Home extends React.Component{
render(){
........
}
}
Both case don't need to write
export default Home;
after class.
Shadid
Software craftsman with a passion for web applications, AI and automation. continuously learning and seeking new opportunities where I can apply my technical skills to solve interesting problems and transform complication into simplicity.
Updated on July 08, 2022Comments
-
Shadid almost 2 years
I was working with
create-react-app
and came across this issue where I get an error:Home does not contain an export named Home.
Here's how I set up my
App.js
file:import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App;
Now in my
layouts
folder I have theHome.js
file, which is setup like following:import React, { Component } from 'react'; class Home extends Component { render() { return ( <p className="App-intro"> Hello Man </p> ) } } export default Home;
As you can see, I am exporting the
Home
component. But I get an error in my console saying this:What is going on?
-
Abhinav Singi almost 7 yearsOr you could also do a named export. Ex. export {Home};
-
Andrew Li almost 7 years@AbhinavSingi Yes, but it's convention and widely practiced to export a component as the default export of a module. Plus there are no other exports.
-
Abhinav Singi almost 7 yearsYes, exactly @AndrewLi, we also follow the same practice :)
-
Andrew Li over 6 yearsWhat else does this add to the existing answer?
-
TheBlackBenzKid about 6 yearsAwesome so multiple would be wrapped in curly brackets compared with singular as seen here.
-
Andrew Li about 6 years@TheBlackBenzKid Yes, if you have multiple exports, use named ones. Then import using that name as seen in the linked MDN documentation.
-
Andrew H almost 4 yearsOh man, thanks for this! It was driving me nuts trying to figure out what I'd done wrong. Talk about a persnckety programming language. Yikes. Is there a vs plugin that will automatically format js/tsx code to make it harder to make these mistakes?
-
finnmglas almost 4 yearsThis doesn't seem like a good answer and should probably be downvoted. Please read How to answer before you post another anwer. Generally, you also shouldn't answer old questions with many other answers - unless you can add something new the other answers can't. Also include code.
-
citadelgrad over 3 yearsI was able to fixed the warnings messages using
import * as Dash from 'react-native-dash'
from webpack. I suspect some aspect of this implementation has been deprecated. -
phoenixstudio over 3 yearsin the question it state that he did ?