0
262
VistasInicio no contiene una exportación llamada Inicio
Estaba trabajando con create-react-app y me encontré con este problema en el que aparece un error:
Inicio no contiene una exportación llamada Inicio.
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 de layouts , tengo el archivo Home.js , que 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 puede ver, estoy exportando el componente Home . Pero me sale un error en mi consola diciendo esto:
¿Qué está pasando?
3 Respuestas
Responde la pregunta0
El error te dice que estás importando incorrectamente. Aquí está el código que tienes que agregar:
import { Home } from './layouts/Home';Esto es incorrecto porque está exportando como la exportación predeterminada, no como una exportación con nombre. Compruebe 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. Lectura adicional sobre import y export .
0
Usar
import Home from './layouts/Home'en vez de
import { Home } from './layouts/Home' Eliminar {} de Inicio
0
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 exportEn su caso, el Inicio se exportó como predeterminado. Este es el que se importará del módulo, cuando no especifique un nombre determinado de una determinada pieza de código. Cuando importe y omita las llaves, buscará la exportación predeterminada en el módulo desde el que está importando. Entonces su importación debería ser,
import Home from './layouts/Home'; // if the Home is a default exportAlgunas referencias para mirar: