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

4uqofj5v  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(60)
描述问题:

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

截图或视频:

如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    npm.
  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    3.4.0-beta.12
  3. 粘贴有问题的完整 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"
  }
}
  1. 操作步骤
    在我的nextjs项目中,使用npm run dev 访问以上代码的页面,便会在console中出现该报错
dvtswwa3

dvtswwa31#

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

Please review the labels and make any necessary changes.

rhfm7lfc

rhfm7lfc2#

估计还是 monaco-editor的原因

p1tboqfb

p1tboqfb3#

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

1wnzp6jl4#

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

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

nlejzf6q

nlejzf6q5#

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

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

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

brqmpdu1

brqmpdu16#

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

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

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

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

相关问题