Home enthält keinen Export namens Home

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.

Was ist los?

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.

Verwenden

import Home from './layouts/Home'

eher, als

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

{}Von zu Hause entfernen

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:

• 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

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

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.

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

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;