React での require が失敗した場合の対処方法

react の require は、require が文字列ではなく ES モジュールを返すため失敗します。解決策は、「require('../path/to/image.jpg').default;」を通じてこれを導入することです。それ。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react での require が失敗した場合はどうすればよいですか?

react プロジェクトの require によって導入された無効な画像の理由と解決策

原因

create-react-app を使用する場合Image をインポートする場合、require は文字列の代わりに ES モジュールを返します。これは、ファイルローダーでは esModule オプションがデフォルトで有効になっているためです。

解決策

const image = require('../path/to/image.jpg').default;
// OR
import image from '../path/to/image.jpg';

requireとimportの違い

requireはnodeに実装されているAPIであるcommonjsの仕様です。 ; import は es の構文であり、コンパイラによって処理されます。したがって、import はモジュールの依存関係の静的分析を行うことができ、webpack、rollup などを使用してツリーシェイクを行うことができます。

commonjs によってエクスポートされた値はコピーされます。require はコピーされた値を導入します (参照型は参照のみをコピーします)。es モジュールによってエクスポートされる値は、基本型に関係なく同じです (エクスポートのデフォルトを除く)。またはアプリケーションの種類。

記述方法に違いがあります。インポートの場合、 import * を使用してすべてのエクスポートを導入することも、 import aaa, {bbb} を使用してデフォルトとデフォルト以外のエクスポートをそれぞれ導入することもでき、どちらの方がより柔軟です。必要以上に。

推奨される学習: 「react ビデオ チュートリアル 」

以上がReact での require が失敗した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。