Create React App + TypeScript下~/*绝对路径配置无效求助

问题现状 #

在Create React App + TypeScript项目中配置~/*格式绝对路径后：

• VSCode可通过点击组件正常跳转至对应文件
• 项目运行编译时报错，提示无法解析~/pages模块
• 当前tsconfig.json设置baseUrl为src，paths中"~/*": ["./*"]；改用baseUrl为.、paths设"pages": ["src/pages"]的方式可行，但希望用~/*区分src内文件与node_modules模块，且不想使用react-app-rewired

报错原因 #

TypeScript的tsconfig.json中paths仅用于编辑器（如VSCode）的类型检查和跳转提示，Create React App默认的Webpack配置不会自动同步这些路径别名，因此编译时Webpack无法识别~/*格式的路径。

解决方案 #

使用@craco/craco扩展Webpack配置，无需eject或使用react-app-rewired：

步骤1：安装依赖 #

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

步骤2：添加Craco配置文件 #

在项目根目录创建craco.config.js，配置Webpack的路径别名：

const path = require('path');

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

步骤3：修改package.json的脚本命令 #

将原有的react-scripts命令替换为craco：

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

步骤4：保留原tsconfig.json配置 #

无需修改已有的tsconfig.json，确保VSCode仍能识别路径跳转：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["./*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

验证效果 #

重启VSCode（可选），运行npm start，项目可正常编译，同时VSCode仍支持~/*路径的跳转功能。

内容的提问来源于stack exchange，提问作者Md Misbauddin Chowdhury