Home enthält keinen Export namens Home

123

Ich habe mit gearbeitet create-react-appund bin auf dieses Problem gestoßen, wo ich es bekomme Home does not contain an export named Home.

So richte ich meine App.jsDatei ein:

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;

Jetzt habe layoutsich in meinem Ordner die Home.jsDatei. Das ist wie folgt eingerichtet.

import React, { Component } from 'react';

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

export default Home;

Wie Sie sehen, exportiere ich die HomeKomponente, erhalte jedoch eine Fehlermeldung in meiner Konsole, die dies besagt.

Geben Sie hier die Bildbeschreibung ein

Was ist los?

Shadid
quelle

Antworten:

263

Der Fehler zeigt an, dass Sie falsch importieren. Der Code, den Sie jetzt haben:

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

Ist falsch, da Sie als Standardexport exportieren und nicht als benannter Export. Überprüfen Sie diese Zeile:

export default Home;

Sie exportieren standardmäßig und nicht als Namen. Importieren Sie also Homewie folgt:

import Home from './layouts/Home';

Beachten Sie, dass keine geschweiften Klammern vorhanden sind. Weiterführende Literatur zu importund export.

Andrew Li
quelle
1
Oder Sie können auch einen benannten Export durchführen. Ex. export {Home};
Abhinav Singi
1
@AbhinavSingi Ja, aber es ist üblich und weit verbreitet, eine Komponente als Standardexport eines Moduls zu exportieren. Außerdem gibt es keine weiteren Exporte.
Andrew Li
Ja, genau @AndrewLi, wir folgen auch der gleichen Praxis :)
Abhinav Singi
Genial, so dass mehrere in geschweiften Klammern stehen würden, verglichen mit Singular, wie hier zu sehen.
TheBlackBenzKid
2
@TheBlackBenzKid Ja, wenn Sie mehrere Exporte haben, verwenden Sie benannte. Importieren Sie dann unter diesem Namen, wie in der verknüpften MDN-Dokumentation angegeben.
Andrew Li
11

Verwenden

import Home from './layouts/Home'

eher, als

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

{}Von zu Hause entfernen

Shekhar
quelle
10
Was trägt dies noch zur bestehenden Antwort bei?
Andrew Li
4

Dies ist ein Fall, in dem Sie Standardexporte und benannte Exporte verwechselt haben.

Wenn namedSie versuchen, die Exporte zu importieren, sollten Sie geschweifte Klammern wie folgt verwenden:

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

In Ihrem Fall wurde das Home standardmäßig exportiert. Dies ist derjenige, der aus dem Modul importiert wird, wenn Sie keinen bestimmten Namen eines bestimmten Codeteils angeben. Wenn Sie importieren und die geschweiften Klammern weglassen, wird in dem Modul, aus dem Sie importieren, nach dem Standardexport gesucht. Ihr Import sollte also sein,

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

Einige Hinweise zum Anschauen:

Prime
quelle
1

Ich bin gerade auf diese Fehlermeldung gestoßen (nach dem Upgrade auf nextjs 9 haben einige transpilierte Importe diesen Fehler gemeldet). Ich habe es geschafft, sie mit folgender Syntax zu reparieren:

import * as Home from './layouts/Home';
Mahdi
quelle
1

Wir können auch verwenden

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

Verwenden des Schlüsselworts export vor dem Schlüsselwort class.

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

Standardmäßig

 import Home from './layouts/Home'; 

Standardexportklasse

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

Beide Fälle müssen nicht geschrieben werden

export default Home;

nach dem Unterricht.

Alimon Karim
quelle
0

Sie können dieses Problem auf zwei Arten lösen. Die erste Möglichkeit, die ich für die beste halte, besteht darin, das Importieren eines Teils Ihres Codes durch die folgende zu ersetzen:

import Home from './layouts/Home'

oder exportieren Sie Ihre Komponente ohne Standard, was so genannter Export heißt

import React, { Component } from 'react';

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

export {Home};
Ehsan Ahmadi
quelle
0

Das ist die Lösung:

  • Gehen Sie zu Ihrer Datei Home.js.
  • Stellen Sie sicher, dass Sie Ihre Datei am Ende der Datei folgendermaßen exportieren:
export default Home;
igal neeman
quelle
Dies scheint keine gute Antwort zu sein und sollte wahrscheinlich abgelehnt werden. Bitte lesen Sie, wie Sie antworten müssen, bevor Sie eine weitere Antwort veröffentlichen. Im Allgemeinen sollten Sie alte Fragen auch nicht mit vielen anderen Antworten beantworten - es sei denn, Sie können etwas Neues hinzufügen, die anderen Antworten nicht. Fügen Sie auch Code hinzu.
finnmglas