web-dev-qa-db-ja.com

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コンポーネントをエクスポートしていますが、コンソールにエラーと表示されます。

enter image description here

何が起こっている？

javascriptreactjsecmascript-6create-react-app
90
Shadid

エラーは、インポートが正しくないことを知らせています。あなたが今持っているコード：

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

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

export default Home;

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

import Home from './layouts/Home';

中括弧がないことに注意してください。 import および export についてさらに読んでください。

205
Li357

つかいます

import Home from './layouts/Home'

のではなく

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

Homeから{}を削除します。

9
Shekhar

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

namedエクスポートを扱うとき、それらをインポートしようとするならば、以下のように中括弧を使うべきです、

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

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

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

見ていくつかの参照：

1
prime

この問題を解決するには、次の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};
0
Ehsan Ahmadi

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

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