antvis / antvis/G6

[Bug]: Can't get wasm rendering to work

Open
#7,441 2 comments 0 reactions 0 assignees View on GitHub
feature 💡 layout waiting for maintainer
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

Can't get graph with fruchterman wasm to display. I get this error in the console

```
dagre.js?v=ac14d98c:3 Uncaught SyntaxError: The requested module '/node_modules/dagre/index.js?v=ac14d98c' does not provide an export named 'default' (at dagre.js?v=ac14d98c:3:8)
```

### Reproduction link / 复现链接

_No response_

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

`App.tsx`:

```
import { useEffect, useRef } from "react";

import { register, Graph, ExtensionCategory } from "@antv/g6";

import {
FruchtermanLayout,
initThreads,
supportsThreads,
} from "@antv/layout-wasm";

register(ExtensionCategory.LAYOUT, "fruchterman-wasm", FruchtermanLayout);

const supported = await supportsThreads();

const threads = await initThreads(supported);

export default function App() {
const containerRef = useRef(null);

useEffect(() => {
const graph = new Graph({
container: containerRef.current!,

data: {
nodes: [
{
id: "node-1",

style: { x: 50, y: 100 },
},

{
id: "node-2",

style: { x: 150, y: 100 },
},
],

edges: [{ id: "edge-1", source: "node-1", target: "node-2" }],
},

layout: {
type: "fruchterman-wasm",

threads,
},
});

graph.render();
}, []);

return

;
}
```

vite config:

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

// https://vite.dev/config/
export default defineConfig({

plugins: [react(), {
name: 'isolation',
configureServer(server) {
// @see https://gist.github.com/mizchi/afcc5cf233c9e6943720fde4b4579a2b
server.middlewares.use((_req, res, next) => {
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
next();
});
},
},],
optimizeDeps: {
exclude: ['@antv/layout-wasm'],
},
})
```

### Version / 版本

🆕 5.x

### OS / 操作系统

- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the provided App.tsx example with the shown Vite configuration in Chrome, then inspect how @antv/layout-wasm and dagre are bundled and imported. Done means the fruchterman-wasm graph renders without the reported missing default export error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite, wasm
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.