React应用升级后目录导入失效：原由、可行性及使用建议咨询

问题背景 #

• 旧React版本中，import { User } from '../System'可正常运行，System目录包含User.js（文件结尾为export default User）
• 升级后该语句报错：Can't resolve '../System' in 'C:\my app\，需改为import User from '../System/User';才能正常运行
• 更新：确认System目录下存在index.js，这是之前能从目录导入的核心原因

1. 为何之前能直接导入目录？ #

ES模块原生规范不支持直接导入目录，但Webpack、旧版Create React App这类构建工具默认会把目录下的index.js当作该目录的入口文件。你之前的System/index.js应该做了模块导出转发（比如export { default as User } from './User'），所以import { User } from '../System'本质是导入了index.js里的导出项，而非直接读取目录。

2. 目录导入的方式还能用吗？ #

仍然可行，但需要满足两个前提：

• 你的构建工具（或Node.js运行环境）保留了“目录入口指向index.js”的配置，部分新工具可能需要显式设置mainFiles参数指定入口文件名
• 目标目录下存在正确的index.js，并且正确导出了你需要的模块

3. 是否建议继续用目录导入？ #

看项目场景选择：

• 推荐场景：如果目录下有多个关联模块，用index.js统一导出可以简化导入路径，减少重复的长路径书写，后期调整模块结构时也更容易维护
• 不推荐场景：如果只是单个独立模块，直接导入具体文件更直观，能避免因构建工具配置变更导致的导入失效问题（比如你这次遇到的情况）

内容的提问来源于stack exchange，提问作者Woodchuck