描述问题:
在使用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"
}
}
- 操作步骤
在我的nextjs项目中,使用npm run dev 访问以上代码的页面,便会在console中出现该报错
6条答案
按热度按时间dvtswwa31#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
rhfm7lfc2#
估计还是 monaco-editor的原因
p1tboqfb3#
FormulaControl.prototype.filterCustomRendererProps
方法里,写死了 :curRendererSchema.popOverContainer = window.document.body
;然后执行
translateSchema
方法,在遍历curRendererSchema
对象时,进入了死循环。nextjs 13中,
window.document.body
对象,有__reactFiber和__reactProps两个子对象,执行递归遍历时,会死循环1wnzp6jl4#
FormulaControl.prototype.filterCustomRendererProps
方法里,写死了 :curRendererSchema.popOverContainer = window.document.body
;然后执行
translateSchema
方法,在遍历curRendererSchema
对象时,进入了死循环。nextjs 13中,
window.document.body
对象,有__reactFiber和__reactProps两个子对象,执行递归遍历时,会死循环是的,第一个问题我也是按照你的方式解决了,第二个问题我放弃了,感觉amis的兼容性还是有点问题,对一些新的框架兼容的不太好,我找了个vue的低代码组件用vue3去开发了,谢谢你!
nlejzf6q5#
FormulaControl.prototype.filterCustomRendererProps
方法里,写死了 :curRendererSchema.popOverContainer = window.document.body
;然后执行
translateSchema
方法,在遍历curRendererSchema
对象时,进入了死循环。nextjs 13中,
window.document.body
对象,有__reactFiber和__reactProps两个子对象,执行递归遍历时,会死循环是的,第一个问题我也是按照你的方式解决了,第二个问题我放弃了,感觉amis的兼容性还是有点问题,对一些新的框架兼容的不太好,我找了个vue的低代码组件用vue3去开发了,谢谢你!
第二个我已经提issue了,应该很快会修复。编辑器选了一圈,其实还是aims成熟度最高
brqmpdu16#
FormulaControl.prototype.filterCustomRendererProps
方法里,写死了 :curRendererSchema.popOverContainer = window.document.body
;然后执行
translateSchema
方法,在遍历curRendererSchema
对象时,进入了死循环。nextjs 13中,
window.document.body
对象,有__reactFiber和__reactProps两个子对象,执行递归遍历时,会死循环是的,第一个问题我也是按照你的方式解决了,第二个问题我放弃了,感觉amis的兼容性还是有点问题,对一些新的框架兼容的不太好,我找了个vue的低代码组件用vue3去开发了,谢谢你!
第二个我已经提issue了,应该很快会修复。编辑器选了一圈,其实还是aims成熟度最高
确实,我也是找了一大圈,然后折腾了好久想用amis,修复了辛苦留个言,到时候再接着折腾,哈哈