Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report]: 在NEXT.JS 里面使用会遇到 window is not defined #1625

Closed
17347013442 opened this issue Jun 11, 2024 · 2 comments
Closed
Labels
bug Something isn't working

Comments

@17347013442
Copy link

发生了什么?

`
import React, { useEffect } from 'react';
import LogicFlow from '@logicflow/core';

export default function Design() {
const data = {
nodes: [
{
id: '1',
type: 'rect',
x: 100,
y: 100,
text: '节点1',
},
{
id: '2',
type: 'circle',
x: 300,
y: 100,
text: '节点2',
},
],
edges: [
{
sourceNodeId: '1',
targetNodeId: '2',
type: 'polyline',
text: '连线',
startPoint: {
x: 140,
y: 100,
},
endPoint: {
x: 250,
y: 100,
},
},
],
};

console.log("typeof window:", typeof window !== 'undefined')
if (typeof window !== 'undefined') {
console.log("🚀 ~ Design ~ window:", window)
} else {
console.log("🚀 ~ Design ~ window222")
}

useEffect(() => {
if (typeof window !== 'undefined') {
debugger
console.log("window:",window)
const lf = new LogicFlow({
container: document.querySelector('#graph') as HTMLElement,
height: 400,
});
lf.render(data);
lf.translateCenter();
}
}, []);

return (




);
} ` 去掉 new LogicFlow这段代码程序正常运行,加上就报window is not defined

logicflow/core版本

1.2.27

logicflow/extension版本

1.2.27

logicflow/engine版本

1.2.27

浏览器&环境

Chrome

@17347013442 17347013442 added the bug Something isn't working label Jun 11, 2024
Copy link

github-actions bot commented Jun 11, 2024

由于所提供信息的不充分,该 issue 被暂时关闭了。请修改 issue 以提供最小可复现示例(可以通过以下方式:1. 在任意在线编码平台如 codesanbox 编写示例。将其保存到自己空间,然后贴上链接。2. 在自己 github 中创建一个最简单的示例,然后贴上 github 链接。3. 删除项目中的 node_modules 部分,打包项目,并拖拽到 issue 输入框中上传(或提供远程可下载地址))来重启 issue。

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Jun 11, 2024
@17347013442
Copy link
Author

17347013442 commented Jun 11, 2024

已经解决了,在使用页面路由的情况下,import dynamic from 'next/dynamic';
const DesignPage = dynamic(import('@/component/dynamicLogicFlow'), { ssr: false });

export default function Design() {
return
}
使用dynamic 延迟加载使用LogicFlow的组件,并且ssr: false禁止服务端渲染;使用app路由可以在组件顶部使用'use client'来进行客户端渲染

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants