Inicio no contiene una exportación denominada Inicio

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.

Que esta pasando?

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.

Utilizar

import Home from './layouts/Home'

más bien que

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

Quitar {}de casa

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:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

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';

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.

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};

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;