Home does not contain an export named Home

Home does not contain an export named Home

I was working with create-react-app and came across this issue where I get 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 (

Hello

)
}
}

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(

Hello Man

)
}
}

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?

Solutions/Answers:

Solution 1:

The error is telling you that you are importing incorrectly. The code you have now:

import { Home } from './layouts/Home';

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 :

Solution 4:

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 5:

You are leaving a space in your

<Home /> 

tag. remove the space and have it be

<Home/>

. Apparently React does not like this unless you are passing props in the component.