Create React App(TypeScript)项目路径别名配置失败，遭遇无法解析'~/App'与找不到node:fs模块错误

我来帮你拆解并解决这两个困扰你的问题，咱们逐个处理：

问题1：~/App路径别名运行时无法解析（VSCode能识别但npm start报错） #

Create React App（CRA）的默认配置并不会读取tsconfig.json里的paths规则来修改webpack的模块解析逻辑——VSCode能识别是因为它会读取tsconfig的配置，但webpack本身不认这一套，所以就出现了编辑器正常但运行时报错的情况。要搞定这个，咱们需要用工具来覆盖CRA的默认webpack配置，推荐用craco，操作步骤如下：

1. 安装依赖：

npm install @craco/craco craco-alias --save-dev

2. 创建craco配置文件：在项目根目录新建craco.config.js，写入以下内容：

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: './tsconfig.json',
      },
    },
  ],
};

3. 修改package.json的启动脚本：把原来的react-scripts命令替换成craco：

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

4. 重启开发服务器：现在再运行npm start，~/App的导入应该就能被webpack正确解析了。

问题2：找不到node:fs模块的解析错误 #

这个问题的根源是你的Node.js版本太低——node:前缀的模块导入语法是Node.js 14.13.0及以上才支持的，而你用的eslint-import-resolver-typescript@3.2.5已经用上了这个语法。你有两个可选方案：

方案A：升级Node.js（推荐） #

把你的Node.js版本升级到14.13.0或更高的LTS版本（比如16.x、18.x），这样就能原生支持node:fs的导入方式，直接解决这个问题。

方案B：降级兼容的包版本 #

如果暂时没法升级Node.js，可以把eslint-import-resolver-typescript降级到3.1.0版本，这个版本还没使用node:前缀的语法：

npm install eslint-import-resolver-typescript@3.1.0 --save-dev

最后验证步骤 #

完成配置后，建议你：

• 重启VSCode，确保编辑器重新加载所有配置
• 删除node_modules和package-lock.json，重新执行npm install避免依赖冲突
• 再次运行npm start，检查两个错误是否都已消失

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