已在tsconfig中设置baseUrl，为何非相对导入仍无法生效？

项目目录结构 #

src/
  node_modules
  components/
    MyComponent/
      index.ts
  tsconfig.json
Sites/
  MySite/
    tsconfig.json
    components/
      MyComponent/
       index.ts

Sites/MySite 目录下的 tsconfig 配置 #

{
  "extends": "../../src/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../../src",
    "rootDirs": ["../../src", "."]
  }
}

问题分析与解决方案 #

你遇到的import React from 'react'这类第三方包非相对导入失败的问题，核心不是baseUrl未生效，而是以下几个关键原因：

1. 父级 tsconfig 排除了 node_modules
   如果src/tsconfig.json中设置了"exclude": ["node_modules"]，即便子项目指定baseUrl指向../../src，TypeScript 也会忽略该目录下的node_modules，导致第三方包无法被找到。

   • 解决：检查并移除父级 tsconfig 中对node_modules的排除，或者在子项目 tsconfig 中覆盖配置：

     "exclude": []
     

2. 模块解析策略被修改
   虽然node是 TypeScript 默认的模块解析策略，但如果父级 tsconfig 修改了moduleResolution配置，会导致 TS 不遵循 Node.js 向上遍历目录查找node_modules的规则。

   • 解决：在子项目 tsconfig 中明确指定解析策略：

     {
       "extends": "../../src/tsconfig.json",
       "compilerOptions": {
         "baseUrl": "../../src",
         "rootDirs": ["../../src", "."],
         "moduleResolution": "node"
       }
     }
     

3. 未配置正确的文件包含范围
   如果子项目 tsconfig 没有指定include，TS 可能无法正确解析当前目录下的文件，进而影响模块查找逻辑。

   • 解决：添加include覆盖当前项目和 src 目录的所有文件：

     {
       "extends": "../../src/tsconfig.json",
       "compilerOptions": {
         "baseUrl": "../../src",
         "rootDirs": ["../../src", "."],
         "moduleResolution": "node"
       },
       "include": ["./**/*", "../../src/**/*"]
     }
     

替代简化方案 #

如果不需要baseUrl指向 src，也可以将baseUrl设为当前目录（.），让 TS 自动向上遍历找到../../src/node_modules，更符合 Node.js 默认行为：

{
  "extends": "../../src/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "rootDirs": ["../../src", "."],
    "moduleResolution": "node"
  },
  "include": ["./**/*", "../../src/**/*"]
}

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