javascript - 为什么某些未指定扩展名的 webpack/Babel ES6 导入会解析为 "undefined?"

Question

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

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

Answer 1

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

两个可能的修复:

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