为什么一些未指定扩展名的webpack / Babel ES6导入解析为“未定义？”

Question

我尝试使用语法.js（无扩展名）解析的某些ES6文件（jsx，。.ts，.tsx，import ComponentName from './folder/ComponentName';）作为undefined，尽管在添加文件扩展名时没有触发Webpack或Typescript错误并正确解析。其他文件解析正常，有或没有扩展名。这是为什么？

虽然它通常发生在React组件中，但无论导入文件的内容是否有默认导出，都会发生这种情况。

Answer 1

这是因为这些文件在同一目录中具有相同名称但不同扩展名（例如“.less”）的邻居。例如，我会在同一个文件夹中同时拥有ComponentName.tsx和ComponentName.less。

两种可能的修复方法：

1. 在Webpack config resolves部分中，将JS / ES6 / TypeScript扩展移到.less / .css扩展名前面，例如从['.less', '.tsx', ...]到['.tsx', '.less', ...]。这样，JavaScript文件首先解析。
2. 更好的是，不要将同名文件保存在同一目录中。