ReactJS项目中tsconfig配置路径别名无效问题求助

核心差异在于模块解析的责任分工 #

• TypeScript的tsconfig.json中配置的paths仅作用于静态类型检查阶段，它只是告诉TS编译器如何识别别名对应的文件路径，并不会修改项目运行时的模块解析逻辑。
• 项目运行时的模块解析是由webpack负责的。NextJS的内置webpack配置会自动读取tsconfig.json里的paths配置，将其转换为webpack的resolve.alias规则，所以别名在运行时也能正常生效。
• 而Create React App（CRA）默认封装了webpack配置，并没有自动同步tsconfig.json的paths到webpack的解析规则中，导致webpack无法识别@src这类别名，从而抛出“Unable to resolve module”错误。

补充说明 #

如果要在CRA项目中让别名同时支持TS检查和运行时解析，需要手动修改webpack的resolve.alias配置。由于CRA默认不允许直接修改webpack配置，通常可以通过以下方式实现：

• 使用craco（CRA 5+推荐）或react-app-rewired + customize-cra工具覆盖默认webpack配置，添加对应别名映射
• 不推荐使用eject命令暴露webpack配置，因为这会失去CRA后续的官方更新支持

内容的提问来源于stack exchange，提问作者Wee Bing Chuan