[解決済み] create-react-app のインポートが src ディレクトリの外にある場合の制限について

質問

create-react-appを使用しています。の中にあるファイルから、公開フォルダにある画像を呼び出そうとしています。 src/components . このエラーメッセージが表示されます。

./src/components/website_index.js モジュールが見つかりませんでした。あなたが試したのは インポート .../../public/images/logo/WC-BlackonWhite.jpg は、以下のようになります。 プロジェクトの src/ ディレクトリの外側にあります。の外側で相対インポートしています。 src/ はサポートされていません。src/ 内に移動させるか、または プロジェクトの node_modules/ からシンボリックリンクを張ります。

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

パスへのインポートができるといろいろ書いてありますが、私にはまだうまくいきません。何か助けがあれば、とてもありがたいです。私はこのような多くの質問があることを知っているが、それらはすべて私にロゴまたは画像をインポートするように言っているので、明らかに私は全体像の中で何かを見逃している。

解決方法は？

これは、create-react-appの開発者が追加した特別な制限です。これは ModuleScopePlugin に存在することを保証するために src/ . このプラグインは、アプリのソースディレクトリからの相対インポートがその外側に到達しないようにします。

この機能を無効にする公式な方法はありません。 eject を追加し、webpack の設定を変更します。

しかし、ほとんどの機能とそのアップデートは、create-react-appのシステム内部に隠されています。もし、あなたが eject を使用すると、新しい機能やその更新ができなくなります。ですから、もしあなたがアプリケーションの管理や設定、webpackの設定などを行う準備ができていないのであれば、このようなことはしないでください。 eject の操作になります。

既存のルールに従う - アセットをsrcに移動するか、または、"src "に基づいて使用する。 public フォルダのURLをインポートしない。

しかし、その代わりに eject をベースとした非公式なソリューションが多く存在します。 リワイヤ を使わずに webpack の設定をプログラム的に変更することができます。 eject . しかし 削除 その ModuleScopePlugin プラグイン はよくない - で利用可能ないくつかの機能が追加されません。 src . ModuleScopePlugin は、複数のフォルダーに対応するように設計されています。

より良い方法は、以下のような完全に動作する追加ディレクトリを追加することです。 src で保護されています。 ModuleScopePlugin . これは react-app-rewire-alias

からインポートしない。 public フォルダーに複製されます。 build フォルダーに格納され、2 つの異なる URL (および異なるロード方法) で利用可能になるため、最終的にパッケージのダウンロードサイズが悪化します。

からインポートする。 src フォルダーを使用することが望ましく、利点もあります。すべてのものがwebpackによってバンドルにチャンクでパックされます。 最適サイズ であり <強い 最高の読み込み効率 .