TypeScript引用错误类型声明：G6与dagre模块冲突如何解决？

当G6和dagre.js共享dagre模块声明名称时，TypeScript会错误解析导入的类型（优先使用G6依赖的dagre-compound声明），导致出现类型不匹配错误。以下是几种可行的解决方式：

方法一：通过tsconfig路径映射强制指定解析来源 #

在tsconfig.json的compilerOptions中添加paths配置，明确将dagre的导入指向正确的类型声明文件：

{
  "compilerOptions": {
    "paths": {
      "dagre": ["./node_modules/@types/dagre/index.d.ts"]
    }
  }
}

这个配置会让TypeScript优先使用项目根目录下@types/dagre的声明，而非G6依赖嵌套的dagre-compound声明。

方法二：调整typeRoots优先级 #

修改tsconfig.json的typeRoots配置，让TypeScript优先查找项目根目录下的@types文件夹，避免解析嵌套依赖中的声明：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"]
  }
}

方法三：直接导入具体文件路径 #

绕开模块名称的解析冲突，直接导入dagre包内的graphlib具体文件：

import { graphlib } from "dagre/dist/graphlib";

方法四：修改G6依赖的模块声明（需补丁工具） #

使用patch-package修改G6依赖中dagre-compound的模块声明名称，避免与dagre.js冲突：

1. 安装依赖：npm install patch-package --save-dev
2. 找到node_modules/@antv/g6/node_modules/dagre-compound/index.d.ts，将declare module 'dagre'修改为declare module 'dagre-compound'
3. 生成补丁：npx patch-package @antv/g6
4. 将生成的patches/文件夹提交到代码仓库，其他开发者安装依赖后会自动应用补丁

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