Home no contiene una exportación llamada Home

Estaba trabajando con create-react-app y me encontré con este problema donde obtengo Home does not contain an export named Home.

Así es como configuro 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. lo cual es una configuración como la siguiente. 

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 diciendo esto.

introduzca la descripción de la imagen aquí

¿Qué está pasando?

Author: Li357, 2017-05-25
Source

3 answers

El error le indica que está importando incorrectamente. El código que tienes ahora:

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

Es incorrecto porque está exportando como la exportación predeterminada, no como una exportación con nombre. Marque esta línea:

export default Home;

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

import Home from './layouts/Home';

Observe que no hay corchetes. Leer más en import y export.

 160
Author: Li357,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-26 13:08:06

Use

import Home from './layouts/Home'

En lugar de

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

Remove {} from Home

 7
Author: Shekhar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-24 13:02:09

Este es un caso en el que mezcló exportaciones predeterminadas y exportaciones con nombre.

Al tratar con las exportaciones named, si intenta importarlas, debe usar llaves como se muestra a continuación, 

import { Home } from './layouts/Home'; // if the Home is a named export

En su caso, el Inicio se exportó como predeterminado. Este es el que se importará desde el módulo, cuando no especifique un cierto nombre de una determinada pieza de código. Al importar, y omitir las llaves, buscará la exportación predeterminada en el módulo estás importando de. Así que su importación debe ser,

import Home from './layouts/Home'; // if the Home is a default export

Algunas referencias para mirar:

 0
Author: prime,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-24 17:40:34