create-react-appがsrcディレクトリの外部にインポート制限をインポートする

私はcreate-react-appを使用しています。内のファイルからパブリックフォルダーの画像を呼び出そうとしていますsrc/components。このエラーメッセージが表示されます。

./src/components/website_index.jsモジュールが見つかりません：プロジェクトのsrc /ディレクトリの外にある../../public/images/logo/WC-BlackonWhite.jpgをインポートしようとしました。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は、create-react-appプロジェクトの操作後にのみ無効にできます。

ほとんどの機能とその更新は、create-react-appシステムの内部に隠されています。作成ejectすると、いくつかの機能とその更新がなくなります。したがって、webpackなどの設定に含まれるアプリケーションを管理および設定する準備ができていない場合は、eject操作しないでください。

既存のルールでプレイします（srcに移動）。しかし今、あなたは制限を取り除く方法を知ることができます：実行してwebpack設定ファイルからeject削除ModuleScopePluginしてください。

以来作成反応するアプリ v0.4.0NODE_PATH環境変数絶対インポートのパスを指定することを可能にします。また、v3.0.0 NODE_PATHは非推奨となっているためbaseUrl、jsconfig.jsonまたはでの設定が推奨されtsconfig.jsonます。

絶対インポートでは、ベースURLで指定された値を基準にしてimport App from 'App'代わりに使用できますimport App from './App'。

この機能は、monoreposまたはその他の構成に関する質問に特に役立ちますが、publicフォルダーから画像やその他のものをインポートする場合には役立ちません。

publicフォルダーのコンテンツはフォルダーに配置されbuild、相対URLで使用できます。また、インポートされたものはすべてwebpackによって処理され、buildフォルダーにも配置されます。

publicフォルダーから何かをインポートすると、おそらくそのものがbuildフォルダーに複製され、2つの異なるURL（または異なるロード方法）で使用できるようになるため、最終的にパッケージのダウンロードサイズが悪化します。

srcフォルダーからインポートすることをお勧めします。すべては、最適なサイズのチャンクで、最高のロード効率のために、Webpackによってバンドルにパックされます。

中間ソリューション、すなわち存在するのReWireあなたは、プログラムのWebPACKの設定を変更することを可能にするシステムが。しかし、プラグインを削除することは良い解決策ではありません。と同様に、完全に機能する追加のディレクトリを追加することをお勧めします。ModuleScopePluginsrc

現在、 create-react-appsrcルートフォルダー以外の追加のディレクトリはサポートされていません。これは、react-app-rewire-aliasを使用して実行できます。

パッケージreact-app-rewiredを使用してプラグインを削除できます。この方法では、イジェクトする必要はありません。

npmパッケージページの手順に従って（パッケージをインストールし、package.jsonファイルで呼び出しをフリップします）、次のようなconfig-overrides.jsファイルを使用します。

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

これにより、使用されているWebPackプラグインからModuleScopePluginが削除されますが、残りはそのままにして、取り出す必要がなくなります。

他の人の答えにもう少し情報を提供するため。.pngファイルをユーザーに配信する方法については、2つのオプションがあります。ファイル構造は、選択した方法に準拠している必要があります。2つのオプションは次のとおりです。

1. import x from yreact-create-appで提供されるモジュールシステム（）を使用して、JSにバンドルします。srcフォルダ内に画像を配置します。

2. それをpublicフォルダーから提供し、Nodeにファイルを提供させます。create-react-appには、環境変数も含まれているようです<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;。これは、Reactアプリでそれを参照することはできますが、通常のGETリクエストでブラウザーが個別に要求することで、Nodeを通じてサービスを提供することを意味します。

ソース：create-react-app

画像がパブリックフォルダーにある場合は、

"/images/logo_2016.png"

<img> srcインポートする代わりに

'../../public/images/logo_2016.png'; 

これは動作します

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

ディレクトリに移動する必要がありWC-BlackonWhite.jpgますsrc。publicディレクトリは、あなたのバンドルに直接インポートしようとしていること（例えばファビコンなど）HTMLに直接リンクすることになるだろう静的ファイル、ではないもののためです。

でソリューションを提供する回答がいくつかありますが、少しエレガントな特別なAPI react-app-rewiredがcustomize-cra公開されていremoveModuleScopePlugin()ます。（同じソリューションですが、customize-craパッケージによって抽象化されています。）

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

Cracoを使用して削除します。

module.exports = {
  webpack: {
    configure: webpackConfig => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      );

      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
      return webpackConfig;
    }
  }
};

この制限により、次のコード行でsrc/は、すべてのファイルまたはモジュール（エクスポート）がディレクトリ内にあり、実装はに./node_modules/react-dev-utils/ModuleScopePlugin.jsあります。

// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
     const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
     if (relative.startsWith('../') || relative.startsWith('..\\')) {
        return callback();
      }

この制限を解除するには、

1. このコードを変更するか（推奨されません）
2. あるいはんejectその後、削除ModuleScopePlugin.jsディレクトリから。
3. やコメント/削除const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');から./node_modules/react-scripts/config/webpack.config.dev.js

PS：イジェクトの結果に注意してください。

これら2つのパッケージをインストールする

npm i --save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start"
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra');

module.exports = function override(config, env) {
    if (!config.plugins) {
        config.plugins = [];
    }
    removeModuleScopePlugin()(config);

    return config;
};

イジェクトする必要はありません。rescriptsライブラリでreact-scripts設定を変更できます

これはその後機能します：

module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

Webpack設定を変更するためにreact-app-rewiredを使用するLukas Bachソリューションは良い方法だと思いますが、ModuleScopePlugin全体を除外しませんなく、srcの外部にインポートできる特定のファイルをホワイトリストに登録します。

config-overrides.js

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");

module.exports = function override(config) {
  config.resolve.plugins.forEach(plugin => {
    if (plugin instanceof ModuleScopePlugin) {
      plugin.allowedFiles.add(path.resolve("./config.json"));
    }
  });

  return config;
};

パブリックフォルダー内の画像

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

• js拡張機能内で画像を使用する

README.mdやpackage.jsonなどの単一のファイルのみをインポートする必要がある場合、これをModuleScopePlugin（）に明示的に追加できます。

config / paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

config / webpack.config.dev.js + config / webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

最善の解決策はforkすることですreact-scripts。これは実際には公式ドキュメントで言及されています。「排出の代替手段」を参照してください。

Antデザインを使用する場合など、複数の変更が必要な場合は、次のように複数の機能を組み合わせることができます。

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

Bartek Maciejiczekの答えに加えて、これはCracoでの外観です：

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const path = require("path");

module.exports = {
  webpack: {
    configure: webpackConfig => {
      webpackConfig.resolve.plugins.forEach(plugin => {
        if (plugin instanceof ModuleScopePlugin) {
          plugin.allowedFiles.add(path.resolve("./config.json"));
        }
      });
      return webpackConfig;
    }
  }
};