baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.41k stars 2.52k forks source link

nextjs13 环境, curRendererSchema.popOverContainer 写死,导致编辑器出现死循环bug #8355

Closed hehuasa closed 1 year ago

hehuasa commented 1 year ago

描述问题:

nexjs13 环境,部署运行 amis-editor 包,拖拽大部分表单类组件至编辑器,点击组件编辑其属性时,会报 RangeError: Maximum call stack size exceeded错误。

截图或视频:

经排查,应该是/amis-editor/esm/renderer/FormulaControl.js文件,写死了 curRendererSchema.popOverContainer = window.document.body; ,然后执行 translateSchema方法,最终 在/amis-core/esm/utils/helper.js中,调用 mapObject方法中的循环逻辑, 导致了死循环的。 因为nextjs 13, window.document.body对象,有reactFiber,reactProp 两个子对象,递归遍历会导致死循环: 1. image 2. image

3. image

d3cc39b8fe2b40c77114f5753de5353 1697014424369 1697014440655

如何复现(请务必完整填写下面内容):

  1. 你是如何使用 amis 的? nextjs13 空项目, 包管理使用pnpm;

pnpm 装好 amis amis-core amis-editor amis-ui 依赖,webpack配置了 monaco-editor-webpack-plugin ;

  1. amis 版本是什么? amis 版本3.4.2, editor版本 5.6.1;
  2. 粘贴有问题的完整 amis schema 代码:
  3. 最小复现:

AimsEditor.tsx:

import React from 'react'
import { Editor } from 'amis-editor';
import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';
import 'amis-editor-core/lib/style.css';
import '@fortawesome/fontawesome-free/css/all.css';
const AimsEditor = () => {
    return (
        <Editor
            theme={'cxd'}
            value={{
                "type": "page",
            }}
            $schemaUrl='/static/schema.json'
            onChange={() => { }}
            className='is-fixed'
            showCustomRenderersPanel={true}

        />
    )

}
export default AimsEditor

app 路由,page.tsx:

"use client"
import React from 'react'
import dynamic from 'next/dynamic'
const AimsEditor = dynamic(() => import("@/components/AimsEditor"), { ssr: false })

const Editor = () => {

    return (
        <div>
            <AimsEditor />
        </div>
    )
}

export default Editor
  1. 操作步骤 拖拽一个下拉框组件,点击展示属性,就会复现。

建议: nextjs13 相对使用率还是比较普遍,能否特殊处理一下这个情况。例如在helper.js中,调用 mapObject方法递归循环时,把reactFiber对象filter出去,或者给一个 popOverContainer 的配置项,避免写死。

谢谢

github-actions[bot] commented 1 year ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

hehuasa commented 1 year ago

reactFiber,reactProp 是在描述issue时的简写~, 我看commit里是直接判断了item.__reactFiber || item.__reactProp么。 实际的key值是 __reactFiber$xxxx(随机字符串)、__reactProps$xxxx(随机字符串)这样的格式。。。

微信图片_20231012140216

@igrowp