React-18+TS4.6.3(CRA)项目tsconfig路径映射失效原因咨询

问题原因 #

你遇到的问题确实和webpack有关：TypeScript的paths配置仅用于编辑器（比如VS Code）的代码提示和TS语法检查，webpack本身不会读取tsconfig的路径映射规则。create-react-app默认封装了webpack配置，没有自动同步TS的paths到webpack的别名配置，所以编译时会出现模块找不到的错误。

验证你的tsconfig配置 #

先确认你的tsconfig.json配置是否正确，示例如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utils/*": ["src/utils/*"],
      "components/*": ["src/components/*"],
      "src/*": ["src/*"]
    },
    // 其他TS配置...
  }
}

注意：paths中的映射路径必须相对于baseUrl（这里是项目根目录），确保src/utils/url.ts确实存在。

解决方案 #

因为create-react-app不允许直接修改webpack配置，你需要通过以下方式解决：

方法1：使用craco修改webpack别名

这是最常用的方案，步骤如下：

1. 安装依赖：

npm install @craco/craco --save-dev
# 或者 yarn add @craco/craco --dev

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

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'utils': path.resolve(__dirname, 'src/utils'),
      'components': path.resolve(__dirname, 'src/components'),
      'src': path.resolve(__dirname, 'src')
    }
  }
};

3. 修改package.json中的scripts命令，替换react-scripts为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

4. 重启开发服务，重新编译即可解决问题。

方法2：使用react-app-rewired（替代方案）

和craco原理类似，通过重写cra的webpack配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 创建config-overrides.js文件：

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

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

3. 修改package.json的scripts：

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

注意事项 #

• 确保tsconfig的paths和webpack的alias配置一一对应，避免映射不一致导致的问题。
• 如果使用TypeScript，不需要额外配置ts-loader，craco/react-app-rewired会自动处理TS相关配置。

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