Home does not contain an export named Home
JavascriptReactjsEcmascript 6Create React-AppJavascript Problem Overview
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 the Home.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?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
Use
import Home from './layouts/Home'
rather than
import { Home } from './layouts/Home'
Remove {}
from Home
Solution 3 - Javascript
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 :
Solution 4 - Javascript
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 - Javascript
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.
Solution 6 - Javascript
put export { Home };
at the end of the Home.js file
Solution 7 - Javascript
You can use two ways to resolve this problem, first way that i think it as best way is replace importing segment of your code with bellow one:
import Home from './layouts/Home'
or export your component without default which is called named export like this
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export {Home};
Solution 8 - Javascript
This is the solution:
- Go to your file Home.js
- Make sure you export your file like this in the end of the file:
export default Home;