web-dev-qa-db-ja.com

index.jsを介してフォルダーからインポート

私のReactプロジェクト（w/Webpack））では、私のフォルダー構造は次のようになります。

├── myfile.js 
├── Report
    ├── index.js

私の research に基づいて、Reportモジュールをmyfile.jsにインポートできるはずです。

import { Report } from './Report';

しかし、それはうまくいきません。エラーが発生しました：

インポートしようとしたエラー：「レポート」は「./レポート」からエクスポートされません。

ただし、これは可能です。

import { Report } from './Report/index';

私のReport/index.jsには次のエクスポートがあります：

// export default class Report extends Component { // this was a typo
export class Report extends Component {    
  // etc
}

これを解決するには、または少なくともトラブルシューティングするにはどうすればよいですか？

ちなみに、元々はデフォルトのエクスポート/インポートを使っていましたが、違いが出て欲しいので名前付きに変更しました。そうではありません。

更新します。申し訳ありませんが、この投稿は元々、誤ってexport defaultがindex.jsに含まれていました。これは実際にファイルにあるものではなく、一部の回答者が間違った経路をたどった可能性があります。上で言ったように、インポートをimport Reportからimport { Report }に変更したときに、それをexportに変更しました。したがって、インポートとエクスポートはどちらの場合でも（名前付きまたはデフォルト）一致しているはずであり、どちらも機能していません。

javascriptreactjsimportexport
5
bongbang

解決策：開発用サーバーを再起動します。

[〜＃〜]説明[〜＃〜]

私はそれをある程度理解しました。つまり、開発サーバーを再起動するだけで済みました。

好奇心のための詳細。 Reportをフォルダーにする前は、myfile.jsと同じフォルダーにあるファイルでした。

├── myfile.js 
├── Report.js

ローカルで実行中の開発用サーバーを使用していて、すべてが問題なく動作していました。

次に、新しいフォルダーReportを作成し、Report.jsを使用してgit mv Report.js Report/index.jsをその中に移動しました。その間、開発用サーバーがまだ稼働していて、機能しなくなりました。

なぜそれが正確に機能しなかったのかはわかりませんが（私の投稿で抜粋したものとは異なるエラーメッセージを思い起こしているようです）、デフォルトのエクスポートに問題があると考え、変更に取り掛かりました。

もちろん、開発用サーバーはファイルに加えた変更を認識しましたが、空のファイルでも古いバージョンでも、削除されたReport.jsはまだ存在しているようです。 import { Report } from './Report';を使用すると、古いReport.jsをフェッチするか、フェッチしようとして失敗しましたが、import { Report } from './Report/index';を使用すると、どこに行くべきかが正確にわかっていて、期待どおりに機能しました。

再起動すると、サーバーはファンタスティックReport.jsを認識しなくなり、想定どおり、次にReport/index.jsを検索します。元のデフォルトのエクスポート/インポートを含め、すべてが正常に機能します。

8
bongbang

実際にはクラスからオブジェクトをエクスポートしていないようです。つまり、次のような中括弧は必要ありません。

import { Report } from './Report';

オースティングレコが言ったように、クラスのレポートである1つのものだけをエクスポートするので、中かっこを削除する必要があります。

import Report from './Report';
2
oriont

ファイル名はindex.jsなので、次の2行は同等です。

import { Report } from './Report';  // by default, the module system will look for the index.js file inside a folder
import { Report } from './Report/index';

したがって、2番目のアプローチが機能した理由はありませんが、最初のアプローチは機能しませんでした

あなたの場合、default exportではなくnamed exportを使用しているため、エクスポートされたモジュールを使用するには、これらの両方の方法が機能します。

import Report from './Report'
import Report from './Report/index';

[〜＃〜]更新[〜＃〜]

インポートしようとしたエラー：「レポート」は「./レポート」からエクスポートされません。

このエラーは、import a named exportモジュールを試みていることを示していますが、モジュールシステムは、Reportという名前のnamed exportモジュールを見つけることができません。 default exportではなくnamed exportを使用しているため、明らかです。

[〜＃〜]更新[〜＃〜]

これは実用的なデモです： https://codesandbox.io/s/m7vp982m2p これを参照として使用して、コードを振り返ると、コードが機能しない理由を理解できます。

2
Nguyen You

Index.jsを使用するようにアプリを再構築したばかりの場合、機能させるためにノードを再起動する必要があります。

0
Mike Thomson