Inicio no contiene una exportación denominada Inicio

123

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

Así es como configuro mi App.jsarchivo:

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 layoutscarpeta tengo el Home.jsarchivo. que se configura como sigue.

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 Homecomponente pero aparece un error en mi consola que dice esto.

ingrese la descripción de la imagen aquí

Que esta pasando?

Shadid
fuente

Respuestas:

263

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á exportando de forma predeterminada , no como un nombre. Por lo tanto, importe Homeasí:

import Home from './layouts/Home';

Observe que no hay llaves. Más información sobre importy export.

Andrew Li
fuente
1
O también puede hacer una exportación con nombre. Ex. exportar {Inicio};
Abhinav Singi
1
@AbhinavSingi Sí, pero es una convención y una práctica generalizada exportar un componente como la exportación predeterminada de un módulo. Además, no hay otras exportaciones.
Andrew Li
Sí, exactamente @AndrewLi, también seguimos la misma práctica :)
Abhinav Singi
Impresionante, por lo que múltiples se envolverían entre llaves en comparación con el singular como se ve aquí.
TheBlackBenzKid
2
@TheBlackBenzKid Sí, si tiene varias exportaciones, use las con nombre. Luego importe con ese nombre como se ve en la documentación de MDN vinculada.
Andrew Li
11

Utilizar

import Home from './layouts/Home'

más bien que

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

Quitar {}de casa

Shekhar
fuente
10
¿Qué más agrega esto a la respuesta existente?
Andrew Li
4

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

Cuando se trata de las namedexportaciones, 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, la Casa se exportó como predeterminada. 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 tu importación debería ser,

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

Algunas referencias para buscar:

principal
fuente
1

Me acabo de encontrar con este mensaje de error (después de actualizar a nextjs 9, algunas importaciones transpiladas comenzaron a dar este error). Me las arreglé para arreglarlos usando una sintaxis como esta:

import * as Home from './layouts/Home';
Mahdi
fuente
1

También podemos usar

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

usando la palabra clave de exportación antes de la palabra clave de clase.

export class Home extends React.Component{
    render(){
        ........
    }
}

Por defecto

 import Home from './layouts/Home'; 

Clase de exportación predeterminada

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

Ambos casos no necesitan escribir

export default Home;

después de clases.

Alimon Karim
fuente
0

Puede usar dos formas de resolver este problema, la primera forma en que creo que es la mejor manera es reemplazar el segmento de importación de su código con el siguiente:

import Home from './layouts/Home'

o exportar su componente sin predeterminado que se llama exportación con nombre como este

import React, { Component } from 'react';

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

export {Home};
Ehsan Ahmadi
fuente
0

Esta es la solucion:

  • Vaya a su archivo Home.js
  • Asegúrese de exportar su archivo de esta manera al final del archivo:
export default Home;
igal neeman
fuente
Esta no parece una buena respuesta y probablemente debería ser rechazada. Lea Cómo responder antes de publicar otra respuesta. En general, tampoco debe responder preguntas antiguas con muchas otras respuestas, a menos que pueda agregar algo nuevo, las otras respuestas no pueden. También incluya el código.
finnmglas