[docs]: Custom FlowDirectionGraph CodeSandbox example is broken

[superr-fluous]

📍 Which page are you reading?

https://ant-design-charts.antgroup.com/en/examples/relations/flow-direction-graph/#custom

💭 What's on your mind?

Example needs fixing / 示例需要修复

🤔 Tell us more

If you follow the link to CodeSandbox example, the sandbox is broken due to createRoot is not a function error because of wrong import:

import { createRoot } from 'react-dom';
// should be
import { createRoot } from 'react-dom/client';

After updating the import, the example is still not working with error: EventEmitter is not a constructor.

You can view the update sandbox at https://codesandbox.io/p/sandbox/green-currying-m5f6x5

💡 Got any suggestions?

No response

[dosubot]

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

The initial createRoot error is due to importing from react-dom instead of react-dom/client, which you already fixed. The remaining EventEmitter is not a constructor error comes from a version mismatch or module resolution issue between @antv/g6 and its dependency g-lite. This is a known ecosystem problem, especially in environments like CodeSandbox, and not a direct bug in ant-design-charts.

To resolve this, try aligning the versions of @antv/g6 and g-lite in your dependencies so that only one version of each is installed, and ensure your lockfile is up to date. Sometimes switching to a specific version of related packages (as suggested for similar issues, e.g., using @ant-design/plots@2.6.2 and reinstalling dependencies) can help as well [issue reference].

If the problem persists, it’s likely due to how CodeSandbox handles dependency resolution. Running the example locally with a clean install and aligned dependencies often avoids this error.

To reply, just mention @dosu.

---

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

[hustcc]

@superr-fluous Hello, thanks for your issue, can help to fix it with a pr?

[superr-fluous]

@hustcc I will look into the issue and report back in few days if i can fix it

[superr-fluous]

@hustcc Hi! So the issue is tied to CodeSandbox. The issue does not reproduce locally, I also was not able to test on StackBlitz (there is a different error there).
The error seemingly happens in g-lite

emitter = new EventEmitter();

It seems that bundler config within CodeSandbox does not properly resolve CommonJS to ESM interpolation. The only way to fix this would be to make a separate g-lite package for CodeSandbox that would rewrite the import from:

import EventEmitter from "eventemitter3";

to:

import { default as EventEmitter } from "eventemitter3";

I've tried making a package (npm) but didn't manage to make it work in CodeSandbox nonetheless