Strona główna nie zawiera eksportu o nazwie Strona główna

Pracowałem z create-react-appi natknąłem się na ten problem, gdzie dostaję Home does not contain an export named Home.

Oto jak skonfigurowałem mój App.jsplik:

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;

Teraz w swoim layoutsfolderze mam Home.jsplik. który jest ustawiony jak następujący.

import React, { Component } from 'react';

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

export default Home;

Jak widać, eksportuję Homekomponent, ale w konsoli pojawia się błąd, który mówi o tym.

Co się dzieje?

Błąd informuje, że importujesz nieprawidłowo. Kod, który masz teraz:

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

Jest niepoprawny, ponieważ eksportujesz jako domyślny eksport, a nie jako nazwany eksport. Sprawdź tę linię:

export default Home;

Eksportujesz jako domyślny , a nie jako nazwa. Dlatego importuj w Hometen sposób:

import Home from './layouts/Home';

Zauważ, że nie ma nawiasów klamrowych. Dalsze czytanie importi export.

Posługiwać się

import Home from './layouts/Home'

zamiast

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

Usuń {}z domu

Jest to przypadek, w którym pomieszałeś domyślne eksporty i nazwane eksporty.

Jeśli namedmasz do czynienia z eksportami, jeśli spróbujesz je zaimportować, powinieneś użyć nawiasów klamrowych, jak poniżej,

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

W twoim przypadku strona główna została wyeksportowana jako domyślna. To ten, który zostanie zaimportowany z modułu, jeśli nie określisz określonej nazwy określonego fragmentu kodu. Kiedy importujesz i pomijasz nawiasy klamrowe, będzie szukał domyślnego eksportu w module, z którego importujesz. Więc twój import powinien być,

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

Kilka odniesień do obejrzenia:

• 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

Właśnie natknąłem się na ten komunikat o błędzie (po aktualizacji do nextjs 9 niektóre transpiled import zaczęły powodować ten błąd). Udało mi się je naprawić używając składni takiej:

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

Możemy również użyć

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

używając słowa kluczowego export przed słowem kluczowym class.

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

Domyślnie

 import Home from './layouts/Home'; 

Domyślna klasa eksportu

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

W obu przypadkach nie trzeba pisać

export default Home;

po zajęciach.

Możesz użyć dwóch sposobów rozwiązania tego problemu, pierwszy sposób, który uważam za najlepszy, to zastąpienie importowanego segmentu kodu poniższym:

import Home from './layouts/Home'

lub wyeksportuj swój komponent bez wartości domyślnej, który nazywa się tak nazwanym eksportem

import React, { Component } from 'react';

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

export {Home};

Oto rozwiązanie:

• Przejdź do swojego pliku Home.js
• Upewnij się, że wyeksportujesz swój plik w następujący sposób na końcu pliku:

export default Home;