[Bug]: Cannot read properties of undefined (reading 'Graph')

[weiqiujuan666]

Describe the bug / 问题描述

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 2.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[dosubot]

Hi @weiqiujuan666! I'm Dosu and I’m helping the ant-design-charts team.

This error is usually caused by a version conflict or incorrect import of the Graph class from graphlib or dagre. In projects using ant-design-charts (especially v2.x), this often happens if multiple versions of @dagrejs/graphlib or dagre are present in your dependency tree, or if ESM/CommonJS imports are mixed incorrectly.

To resolve this:

• Make sure all dependencies use the same version of @dagrejs/graphlib (at least 2.1.8). You can enforce this with a resolutions field in your package.json (for yarn) or overrides (for npm 8+):

  "resolutions": {
    "@dagrejs/graphlib": "2.1.8"
  }

  or

  "overrides": {
    "@dagrejs/graphlib": "2.1.8"
  }

  See details

• Always use import syntax for ESM modules. Using require() with ESM packages will cause similar errors. If you see require('graphlib').Graph, switch to import { Graph } from 'graphlib' or ensure your build system supports the syntax you use. See discussion

• If you use dagre, import Graph explicitly from dagre or dagre/lib/graphlib, and instantiate with new dagre.graphlib.Graph(). Avoid using a global Graph type, as this can lead to type pollution and runtime errors. See explanation

• If you are using ant-design-charts with Vite or a similar modern bundler, try importing chart components directly from their ES module paths, e.g. import Line from '@ant-design/charts/es/line'. See workaround

These steps should resolve the "Cannot read properties of undefined (reading 'Graph')" error in most setups. If the problem persists, check your node_modules for duplicate versions of dagre or graphlib and ensure your import statements match your project's module system.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[weiqiujuan666]

因为是vite项目，这种方式导入也不可以import {Line} from '@ant-design/charts/es'; 还是报错

[dosubot]

你遇到的问题是 ant-design-charts 的 ES 构建产物里包含了 CommonJS（require）语法，这会导致 Vite 这种只支持纯 ESM 的工具报错（比如 “Cannot read properties of undefined (reading 'Graph')”）。即使用 import { Line } from '@ant-design/charts/es' 或 import Line from '@ant-design/charts/es/line' 也会遇到类似问题。

目前官方已经修复了这个兼容性问题，修复内容在 2025-10-23 合并，@ant-design/charts-util 0.0.3 及以上版本已解决 ES 构建产物包含 CJS 语法导致 Vite 报错的问题（详见 PR #3088 和 相关 issue）。

建议：

1. 确认你的依赖中 @ant-design/charts-util 版本为 0.0.3 或更高。

2. 如果依赖未升级，可以尝试删除 node_modules 和 lock 文件后重新安装依赖。

3. 如果升级后还有问题，可以临时用 vite-plugin-commonjs 处理 CJS 语法（参考）：

   // vite.config.js
   import commonjs from 'vite-plugin-commonjs'
   export default {
     plugins: [
       commonjs({
         filter: (id) => id.includes('@ant-design/charts-util/')
       })
     ]
   }

4. 也可以尝试 import Line from '@ant-design/charts/lib/line'，部分用户反馈这样能绕过 Vite 的解析问题（参考）。

如果还有报错，建议提供完整的错误信息和依赖版本号，方便进一步定位。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}