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

Question

我尝试使用语法import ComponentName from './folder/ComponentName';一些 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. 更好的是，不要将同名文件保存在同一目录中。