Home does not contain an export named Home

Question

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 (
      <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?

Answer 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.