HomeにはHomeという名前のエクスポートが含まれていません

私は作業していてcreate-react-app、この問題に遭遇しましたHome does not contain an export named Home。

App.jsファイルの設定方法は次のとおりです。

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;

今私のlayoutsフォルダにはHome.jsファイルがあります。以下のように設定します。

import React, { Component } from 'react';

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

export default Home;

ご覧のとおり、Homeコンポーネントをエクスポートしていますが、コンソールにエラーが表示されます。

何が起こっている？

エラーは、間違ってインポートしていることを示しています。あなたが今持っているコード：

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

名前付きエクスポートではなく、デフォルトのエクスポートとしてエクスポートしているため、正しくありません。この行を確認してください：

export default Home;

名前としてではなく、デフォルトとしてエクスポートしています。したがって、次のようにインポートしHomeます。

import Home from './layouts/Home';

中括弧がないことに注意してください。上の深い読みimportとexport。

使用する

import Home from './layouts/Home'

のではなく

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

{}ホームから削除

これは、デフォルトのエクスポートと名前付きエクスポートを混在させた場合です。

namedエクスポートを処理するとき、それらをインポートしようとする場合は、以下のように中括弧を使用する必要があります。

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

あなたの場合、ホームはデフォルトとしてエクスポートされました。これは、特定のコードの特定の名前を指定しない場合に、モジュールからインポートされるものです。インポートして中括弧を省略すると、インポート元のモジュールでデフォルトのエクスポートが検索されます。だからあなたのインポートは

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

見るべきいくつかの参照：

• 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

私はこのエラーメッセージに遭遇しました（nextjs 9にアップグレードした後、いくつかの変換されたインポートがこのエラーを出し始めました）。私は次のような構文を使用してそれらを修正することができました：

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

私たちも使用できます

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

クラスキーワードの前にエクスポートキーワードを使用します。

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

デフォルトでは

 import Home from './layouts/Home'; 

デフォルトのエクスポートクラス

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

どちらの場合も書く必要はありません

export default Home;

放課後。

この問題を解決するには2つの方法を使用できます。最初の方法は、コードのインポートセグメントを次のセグメントに置き換えることです。

import Home from './layouts/Home'

または、このような名前付きエクスポートと呼ばれるデフォルトなしでコンポーネントをエクスポートします

import React, { Component } from 'react';

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

export {Home};

これが解決策です：

• ファイルHome.jsに移動します
• ファイルの最後で、次のようにファイルをエクスポートしてください。

export default Home;