web-dev-qa-db-de.com

Home enthält keinen Export mit dem Namen Home

Ich habe mit create-react-app Gearbeitet und bin auf dieses Problem gestoßen, bei dem ich Home does not contain an export named Home Erhalte.

So richte ich meine App.js - Datei 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 ich in meinem layouts Ordner die Home.js Datei. 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 Komponente Home, es wird jedoch eine Fehlermeldung in meiner Konsole angezeigt.

enter image description here

Was ist los?

javascriptreactjsecmascript-6create-react-app
97
Shadid

Der Fehler sagt Ihnen, dass Sie falsch importieren. Der Code, den Sie jetzt haben:

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

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

export default Home;

Sie exportieren als Standard , nicht als Name. Importiere also Home wie folgt:

import Home from './layouts/Home';

Beachten Sie, dass es keine geschweiften Klammern gibt. Weitere Lektüre zu import und export .

214
Li357

Verwenden

import Home from './layouts/Home'

eher, als

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

Entfernen {} von zu Hause

9
Shekhar

In diesem Fall haben Sie default Exporte und named Exporte vertauscht.

Wenn Sie versuchen, die named -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 als Standard exportiert. Dies ist diejenige, die aus dem Modul importiert wird, wenn Sie keinen bestimmten Namen für ein bestimmtes Codestück angeben. Wenn Sie die geschweiften Klammern importieren und weglassen, wird in dem Modul, aus dem Sie importieren, nach dem Standardexport gesucht. So sollte Ihr Import sein,

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

Einige Hinweise zum Nachschauen:

2
prime

Sie können dieses Problem auf zwei Arten lösen: Erstens ist es meiner Meinung nach am besten, das Importieren eines Teils Ihres Codes durch das folgende zu ersetzen:

import Home from './layouts/Home'

oder exportieren Sie Ihre Komponente ohne Standardeinstellung, die so benannter Export genannt wird

import React, { Component } from 'react';

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

export {Home};
0
Ehsan Ahmadi

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

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