拡張機能を指定していないwebpack/Babel ES6のインポートで「未定義」が解決されるのはなぜですか？

Question

一部ES6ファイル（.js、。jsx、.ts、.tsx）私は構文import ComponentName from './folder/ComponentName';（拡張子なし）をインポートしようと何のWebPACKや活字のエラーをトリガしないと私は、ファイルの拡張子を追加するときに正しく解決するにもかかわらず、undefinedとして解決します。他のファイルは、拡張子の有無にかかわらず問題なく解決します。どうしてこれなの？

通常、Reactコンポーネントで発生しますが、インポートされたファイルの内容に関係なく、またデフォルトエクスポートがあるかどうかに関係なく発生する可能性があります。

Answer 1

これらのファイルは同じ名前の隣に同じ拡張子（「.less」など）があるためです。たとえば、同じフォルダにComponentName.tsxとComponentName.lessの両方があるとします。

つの可能な修正：WebPACKのコンフィグresolvesセクションで

1. 、例えば、.less/.css拡張の前にJS/ES6 /活字体の拡張を移動['.less', '.tsx', ...]から['.tsx', '.less', ...]までです。これにより、JavaScriptファイルが最初に解決されます。
2. 同じ名前のファイルを同じディレクトリに保存しないでください。