如何在Create React App+TypeScript+ESLint项目中配置路径别名？

你在基于cra-ts-storybook-styled-components模板升级依赖后，配置了TypeScript路径别名与ESLint解析器，但运行时出现Module not found: Error: Can't resolve '@/c/services/api'错误——这是因为TypeScript的paths配置仅作用于编译器，而Create React App默认的Webpack配置并未识别这些别名，Next.js内置了对路径别名的支持，所以能正常工作。

以下是两种可行的解决方法：

方法一：使用react-app-rewired自定义Webpack配置（无需eject） #

这是推荐方案，无需暴露CRA的底层配置：

1. 安装依赖：

yarn add -D react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js文件，添加Webpack别名配置：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@/c': path.resolve(__dirname, 'src/c')
  })
);

3. 修改package.json中的脚本命令，替换react-scripts为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

方法二：Eject暴露底层配置（不推荐） #

如果可以接受eject后无法更新react-scripts，可执行以下步骤：

1. 执行eject命令：

yarn eject

2. 在项目根目录的config/webpack.config.js中，找到resolve.alias配置块，添加你的别名：

alias: {
  // 保留原有别名配置
  '@/c': path.resolve(__dirname, '../src/c')
}

额外检查 #

• 确认目标文件路径存在：比如src/c/services/api.ts（或对应扩展名）是否真实存在，避免拼写错误；
• 重启开发服务器：配置修改后需要重新启动yarn start才能生效。

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