单体仓库中无法配置React/TypeScript项目的绝对模块导入

问题分析 #

你遇到的问题是：VSCode能识别common/hooks这类绝对导入，但项目编译时提示模块找不到。核心原因是TypeScript的路径配置和打包工具的路径解析规则不一致——VSCode靠tsconfig.json的baseUrl识别路径，但打包工具（Webpack/CRA/Vite等）没同步这个规则，导致编译时无法定位模块。另外你的tsconfig.json里baseUrl行末尾多了个逗号，属于语法小问题，建议修正。

步骤1：修正tsconfig.json语法错误 #

先把baseUrl行的末尾逗号去掉，避免潜在解析问题：

{
  "compilerOptions":{
    "jsx": "react-jsx",
     "module":"CommonJS",
     "moduleResolution":"node",
     "noImplicitAny":true,
     "outDir":"./public/",
     "preserveConstEnums":true,
     "removeComments":true,
     "sourceMap":true,
     "target":"es5",
     "baseUrl": "src"
  },
  "include": ["src"]
} 

步骤2：同步打包工具的路径解析配置 #

根据你使用的打包工具，添加对应配置：

场景1：使用Create React App（未eject） #

CRA默认支持baseUrl: "src"，但monorepo环境下可能需要用craco扩展配置：

1. 安装依赖：

npm install @craco/craco --save-dev

2. 在webapp目录下创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'common': path.resolve(__dirname, 'src/common'),
      'app': path.resolve(__dirname, 'src/app')
    }
  },
  typescript: {
    enableTypeChecking: true
  }
};

3. 修改package.json的启动脚本：

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

场景2：自定义Webpack配置 #

在webpack.config.js中添加resolve.alias：

const path = require('path');

module.exports = {
  // ...其他原有配置
  resolve: {
    alias: {
      'common': path.resolve(__dirname, 'src/common'),
      'app': path.resolve(__dirname, 'src/app')
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};

场景3：使用Vite #

在vite.config.ts中配置路径别名：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'common': path.resolve(__dirname, './src/common'),
      'app': path.resolve(__dirname, './src/app')
    }
  }
});

可选：优化TS路径配置（配合paths） #

如果需要更明确的路径映射，可以在tsconfig.json的compilerOptions中添加paths：

"compilerOptions": {
  // ...其他配置
  "baseUrl": "src",
  "paths": {
    "common/*": ["common/*"],
    "app/*": ["app/*"]
  }
}

这个配置能让TypeScript更精准地解析绝对路径，但核心还是要保证打包工具同步上述的别名配置。

验证 #

修改完配置后，重启VSCode和开发服务器，重新执行编译命令，模块找不到的报错应该会消失。

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