javascript - Home no contiene una exportación llamada Home

Estaba trabajando con create-react-app y me encontré con este problema donde obtengo un error:

Home no contiene una exportación llamada Home.

Aquí está cómo configuré mi archivo App.js:

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;

Ahora en mi carpeta layouts tengo el archivo Home.js, el cual está configurado de la siguiente manera:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <p className="App-intro">
        Hello Man
      </p>
    )
  }
}

export default Home;

Como puedes ver, estoy exportando el componente Home. Pero recibo un error en mi consola que dice esto:

¿Qué está pasando?

Respuesta #1

El error te está diciendo que estás importando incorrectamente. Aquí está el código que debes agregar:

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

Esto es incorrecto porque estás exportando como exportación por defecto, no como una exportación con nombre. Revisa esta línea:

export default Home;

Estás exportando como predeterminado, no con un nombre. Por lo tanto, importa Home así:

import Home from './layouts/Home';

Observa que no hay llaves. Lectura adicional sobre import y export.

Respuesta #2

Usar

import Home from './layouts/Home'

en lugar de

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

Eliminar {} de Inicio