Página inicial não contém uma exportação denominada Página inicial

Eu estava trabalhando create-react-appe me deparei com esse problema de ondeHome does not contain an export named Home .

Aqui está como eu configuro meu App.jsarquivo:

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;

Agora na minha layoutspasta eu tenho o Home.jsarquivo. que é configurado como a seguir.

import React, { Component } from 'react';

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

export default Home;

Como você pode ver, estou exportando o Homecomponente, mas recebo um erro no meu console dizendo isso.

O que está acontecendo?

O erro está dizendo que você está importando incorretamente. O código que você tem agora:

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

Está incorreto porque você está exportando como a exportação padrão, não como uma exportação nomeada. Verifique esta linha:

export default Home;

Você está exportando como padrão , não como um nome. Assim, importe Homeassim:

import Home from './layouts/Home';

Observe que não há colchetes. Outras leituras sobre importe export.

Usar

import Home from './layouts/Home'

ao invés de

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

Remover {}da página inicial

Este é um caso em que você misturou exportações padrão e nomeou exportações .

Ao lidar com as namedexportações, se você tentar importá-las, use chaves como abaixo,

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

No seu caso, a Casa foi exportada como padrão. É o que será importado do módulo, quando você não especificar um determinado nome de um determinado pedaço de código. Quando você importa e omite os chavetas, ele procurará a exportação padrão no módulo do qual está importando. Portanto, sua importação deve ser,

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

Algumas referências a serem visualizadas:

• 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

Acabei de receber essa mensagem de erro (após a atualização para o nextjs 9, algumas importações transpiladas começaram a dar esse erro). Consegui corrigi-los usando uma sintaxe como esta:

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

Nós também podemos usar

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

usando exportar palavra-chave antes da palavra-chave da classe.

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

Por padrão

 import Home from './layouts/Home'; 

Classe de exportação padrão

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

Ambos os casos não precisam escrever

export default Home;

depois da aula.

Você pode usar duas maneiras de resolver esse problema, a primeira maneira que eu acho que é a melhor maneira de substituir o segmento de importação do seu código pelo seguinte:

import Home from './layouts/Home'

ou exportar seu componente sem padrão, chamado exportação exportada, como este

import React, { Component } from 'react';

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

export {Home};

Esta é a solução:

• Vá para o seu arquivo Home.js
• Certifique-se de exportar seu arquivo assim no final do arquivo:

export default Home;