使用nextjs13引入 amis-editor 时，出现报错Uncaught Error: document is not defined

GemkingYum commented 1 year ago

描述问题：

在使用nextjs13引入amis-editor时，出现以下报错：Uncaught Error: document is not defined 同时，在该页面下，使用除文本框和布局容器以外的所有插件时，点击该插件编辑属性时，右侧面板均会显示报错‘Uncaught Error: document is not defined’

截图或视频：

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ npm.
amis 版本是什么？请先在最新 beta 版本测试问题是否存在 3.4.0-beta.12

粘贴有问题的完整 amis schema 代码：

'use client'
import { Button } from 'antd'
import dynamic from 'next/dynamic' 
import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';
import 'amis-editor-core/lib/style.css';
import { setDefaultTheme } from 'amis';
// import { Editor } from 'amis-editor'
import React, { useState } from 'react';
import type { SchemaObject } from 'amis';
setDefaultTheme('cxd')
const Page = () => {
const [isPreview, setIsPreview] = useState(false)
const [schema, setSchema] = useState({})

const Editor = dynamic(() => import('amis-editor').then(editor => editor.Editor), { ssr: false })

const value: SchemaObject = {
"type": "page",
"id": "u:c744aa0344a8",
"asideResizor": false,
"pullRefresh": {
  "disabled": true
},
"regions": [
  "body",
  "toolbar",
  "header"
]
}
console.log(value)
const onChange = (e: SchemaObject) => {
console.log('change', e)
localStorage.setItem('editting_schema', JSON.stringify(e))
// setSchema(e)
}
const onSave = () => {
console.log('save', schema)
}
return (
<div id="amis-editor">
  <Button onClick={() => setIsPreview(!isPreview)}>{isPreview ? '返回' : '预览'}</Button>
  <Editor  
    value={value}
    onChange={onChange}
    preview={isPreview}
    onSave={onSave}
  />  
</div>
)
}
export default Page

我的next.config.js代码：


/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
return [
  {
    source: '/api/:path*',
    destination: 'http://127.0.0.1:10086/api/:path*'
  }
]
},
webpack: (config, options) => {
console.log('webpackTest', options.dev, options.isServer)
config.module.rules.push({
  test: /\.svg$/,
  exclude: [/node_modules/],
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: '[name]',
        extract: false,
      },
    },
    {
      loader: 'svgo-loader',
      options: {
        plugins: {
          name: 'removeAttrs',
          params: {
            attrs: 'fill'
          }
        }
      }
    }
  ],
});
return config;
},
}

module.exports = nextConfig

我的package.json代码:

{ "name": "baiyu-hrm", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@alilc/lowcode-engine": "^1.1.10", "@ant-design/cssinjs": "^1.16.1", "@ant-design/icons": "^5.2.5", "@types/node": "20.4.9", "@types/react": "18.2.19", "@types/react-dom": "18.2.7", "@vercel/otel": "^0.3.0", "amis": "^3.4.0-beta.12", "amis-editor": "5.6.0-beta.0", "antd": "^5.8.2", "eslint": "8.46.0", "eslint-config-next": "13.4.13", "next": "13.4.13", "parse": "^4.1.0", "react": "18.2.0", "react-dom": "18.2.0", "typescript": "5.1.6" }, "devDependencies": { "svg-sprite-loader": "^6.0.11" } }


4. 操作步骤
在我的nextjs项目中，使用npm run dev 访问以上代码的页面，便会在console中出现该报错

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.

liangxp commented 1 year ago

估计还是 monaco-editor的原因

hehuasa commented 1 year ago

document is not defined 的问题，应该是动态引入导致的。试试在app目录外，先新建一个component 组件，组件里引用editor，再在app路由里用动态导入引用进来；
第二个问题比较麻烦，貌似是 FormulaControl.prototype.filterCustomRendererProps 方法里，写死了：curRendererSchema.popOverContainer = window.document.body; 然后执行translateSchema方法，在遍历 curRendererSchema对象时，进入了死循环。 nextjs 13中， window.document.body对象，有reactFiber和reactProps两个子对象，执行递归遍历时，会死循环

GemkingYum commented 1 year ago

document is not defined 的问题，应该是动态引入导致的。试试在app目录外，先新建一个component 组件，组件里引用editor，再在app路由里用动态导入引用进来；

第二个问题比较麻烦，貌似是 FormulaControl.prototype.filterCustomRendererProps 方法里，写死了：curRendererSchema.popOverContainer = window.document.body; 然后执行translateSchema方法，在遍历 curRendererSchema对象时，进入了死循环。 nextjs 13中， window.document.body对象，有reactFiber和reactProps两个子对象，执行递归遍历时，会死循环

是的，第一个问题我也是按照你的方式解决了，第二个问题我放弃了，感觉amis的兼容性还是有点问题，对一些新的框架兼容的不太好，我找了个vue的低代码组件用vue3去开发了，谢谢你！

hehuasa commented 1 year ago

document is not defined 的问题，应该是动态引入导致的。试试在app目录外，先新建一个component 组件，组件里引用editor，再在app路由里用动态导入引用进来；

第二个问题比较麻烦，貌似是 FormulaControl.prototype.filterCustomRendererProps 方法里，写死了：curRendererSchema.popOverContainer = window.document.body; 然后执行translateSchema方法，在遍历 curRendererSchema对象时，进入了死循环。 nextjs 13中， window.document.body对象，有reactFiber和reactProps两个子对象，执行递归遍历时，会死循环

是的，第一个问题我也是按照你的方式解决了，第二个问题我放弃了，感觉amis的兼容性还是有点问题，对一些新的框架兼容的不太好，我找了个vue的低代码组件用vue3去开发了，谢谢你！

第二个我已经提issue了，应该很快会修复。编辑器选了一圈，其实还是aims成熟度最高

GemkingYum commented 1 year ago

document is not defined 的问题，应该是动态引入导致的。试试在app目录外，先新建一个component 组件，组件里引用editor，再在app路由里用动态导入引用进来；

第二个问题比较麻烦，貌似是 FormulaControl.prototype.filterCustomRendererProps 方法里，写死了：curRendererSchema.popOverContainer = window.document.body; 然后执行translateSchema方法，在遍历 curRendererSchema对象时，进入了死循环。 nextjs 13中， window.document.body对象，有reactFiber和reactProps两个子对象，执行递归遍历时，会死循环

是的，第一个问题我也是按照你的方式解决了，第二个问题我放弃了，感觉amis的兼容性还是有点问题，对一些新的框架兼容的不太好，我找了个vue的低代码组件用vue3去开发了，谢谢你！

第二个我已经提issue了，应该很快会修复。编辑器选了一圈，其实还是aims成熟度最高

确实，我也是找了一大圈，然后折腾了好久想用amis，修复了辛苦留个言，到时候再接着折腾，哈哈

baidu / amis