[Bug]: Can't get wasm rendering to work
- 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