Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'ensure')

[kemisstep]

问题描述

在nextjs使用x6保错

重现链接

暂无

重现步骤

import React, { useEffect, useState } from 'react'
import ReactDOM from "react-dom";
import { Graph, Node } from '@antv/x6'
import { register } from '@antv/x6-react-shape'
import { Dropdown } from 'antd'
import styles from "./index.module.scss"
import { Stencil } from '@antv/x6-plugin-stencil'
import { Snapline } from "@antv/x6-plugin-snapline";
// import useSnapline from "../plugin/useSnapline";
const CustomComponent = ({ node }) => {
    const label = node.prop('label')
    return (
        <Dropdown
            menu={{
                items: [
                    {
                        key: 'copy',
                        label: '复制',
                    },
                    {
                        key: 'paste',
                        label: '粘贴',
                    },
                    {
                        key: 'delete',
                        label: '删除',
                    },
                ],
            }}
            trigger={['contextMenu']}
        >
            <div className="custom-react-node">{label}</div>
        </Dropdown>
    )
}
// 注册
register({
    shape: 'custom-react-node',
    width: 100,
    height: 40,
    component: CustomComponent,
})

const data = {
    nodes: [
        {
            id: 'node1',
            shape: 'rect',
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: 'hello',
            attrs: {
                body: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                    fill: '#fff',
                    rx: 6,
                    ry: 6,
                },
            },
        },
        {
            id: 'node2',
            shape: 'rect',
            x: 160,
            y: 180,
            width: 100,
            height: 40,
            label: 'world',
            attrs: {
                body: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                    fill: '#fff',
                    rx: 6,
                    ry: 6,
                },
            },
        },
    ],
    edges: [
        {
            shape: 'edge',
            source: 'node1',
            target: 'node2',
            label: 'x6',
            attrs: {
                line: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                },
            },
        },
    ],
}


const X6Demo3 = () => {
    const refcontainer = React.useRef();
    const refdndContainer = React.useRef();
    const [graph, setGraph] = React.useState(null);
    const [dnd, setDnd] = React.useState(null);
    useEffect(() => {
        if (typeof window !== undefined &&
            refcontainer.current &&
            refdndContainer.current
        ) {
            // if (
            //     refcontainer.current
            // ) {
            const graph = new Graph({
                container: refcontainer.current,
                // autoResize: true,
                background: {
                    color: '#F2F7FA',
                },
                mousewheel: {
                    enabled: true,
                    modifiers: ['ctrl', 'meta'],
                },
            })
            // 
            graph.use(
                new Snapline({
                    enabled: true,
                    sharp: true
                })
            );
            // useSnapline(graph)
            graph.fromJSON(data) // 渲染元素
            graph.centerContent() // 居中显示

        }
    }, [])
    return (
        <div className={styles.root}>
            <div className="react-shape-app" >
                <div className="dnd-wrap" ref={refdndContainer} />
                <div className="app-content" ref={refcontainer} />
            </div>
        </div>

    )
};

export default X6Demo3;

预期行为

正常展示

平台

nextjs

x6 最新版本

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[NewByVector]

用 codesanbox 复现一下？

[lily97]

我也遇到了同样的问题，我的是vue2，antv是1.34.14版本