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


123

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.

wprowadź opis obrazu tutaj

Co się dzieje?

Odpowiedzi:


263

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.


1
Możesz też wykonać nazwany eksport. Dawny. export {Home};
Abhinav Singi

1
@AbhinavSingi Tak, ale jest to konwencja i szeroko praktykowana eksportowanie komponentu jako domyślnego eksportu modułu. Poza tym nie ma innych eksportów.
Andrew Li

Tak, dokładnie @AndrewLi, my też postępujemy zgodnie z tą samą praktyką :)
Abhinav Singi

Niesamowite, tak wielokrotne byłoby zawarte w nawiasach klamrowych w porównaniu z liczbą pojedynczą, jak widać tutaj.
TheBlackBenzKid

2
@TheBlackBenzKid Tak, jeśli masz wiele eksportów, użyj nazwanych. Następnie zaimportuj, używając tej nazwy, jak pokazano w połączonej dokumentacji MDN.
Andrew Li

11

Posługiwać się

import Home from './layouts/Home'

zamiast

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

Usuń {}z domu


10
Co jeszcze dodaje to do istniejącej odpowiedzi?
Andrew Li

4

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:


1

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

1

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.


0

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

0

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;

To nie wydaje się być dobrą odpowiedzią i prawdopodobnie powinno zostać odrzucone. Przeczytaj artykuł Jak odpowiedzieć, zanim wyślesz kolejną odpowiedź. Generalnie nie powinieneś także odpowiadać na stare pytania wieloma innymi odpowiedziami - chyba że możesz dodać coś nowego, czego inne odpowiedzi nie mogą. Dołącz także kod.
finnmglas
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.