javascript - validacion - Inicio no contiene una exportación llamada Inicio

validar formulario javascript html5

Question

Estaba trabajando con create-react-app y me encontré con este problema en el que 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 de layouts tengo el archivo Home.js que se configura 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 recibo un error en mi consola que dice esto.

Que esta pasando?

Answer 1

Acabo de encontrar este mensaje de error (después de actualizar a nextjs 9, algunas importaciones transpiladas comenzaron a dar este error). Logré arreglarlos usando una sintaxis como esta:

<Home /> 

Answer 2

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. Mira esta línea:

export default Home;

Estás exportando por defecto , no como un nombre. Por lo tanto, importe Home así:

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

Tenga en cuenta que no hay llaves. Lecturas adicionales sobre import y export .

Answer 3

Estás dejando un espacio en tu

<Home/>

etiqueta. quitar el espacio y que sea

<Home/>

. Aparentemente, a React no le gusta esto a menos que esté pasando accesorios en el componente.

Answer 4

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

Al tratar con las exportaciones con 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, la página de inicio se exportó como predeterminada. Este es el que se importará desde el módulo, cuando no especifique un nombre determinado de un determinado 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 export

Algunas referencias para mirar:

• import
• export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

Answer 5

Puede usar dos formas de resolver este problema, la primera forma en que creo que 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 valor predeterminado, que se denomina exportación con nombre de esta manera

import React, { Component } from ''react'';

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

export {Home};

Answer 6

Utilizar

import Home from ''./layouts/Home''

más bien que

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

Eliminar {} de Inicio