官网最新amis项目在运行编辑器的时候，报“mobx-state-tree”相关的错误

citynook commented 1 year ago

描述问题：

下载官网最新的amis项目，运行后通过本地网址：http://127.0.0.1:8888/packages/amis-editor/ 进入到编辑器，添加CURD控件后，进入《编辑》按钮的配置界面时，浏览器捕捉到异常，详见下方截图。

截图或视频：

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

你是如何使用 amis 的？在此官网下载的最新版本的amis项目。
amis 版本是什么？请先在最新 beta 版本测试问题是否存在

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

{
"type": "button",
"label": "编辑",
"actionType": "dialog",
"level": "link",
"dialog": {
"title": "编辑",
"body": {
  "type": "form",
  "api": "xxx/update",
  "body": [
    {
      "name": "id",
      "label": "ID",
      "id": "u:b964ae6a18db",
      "type": "input-text"
    },
    {
      "name": "engine",
      "label": "渲染引擎",
      "id": "u:5bd838561553",
      "type": "input-text"
    }
  ]
}
},
"id": "u:3a10e1e160b4"
}

操作步骤
进入到编辑器
添加CURD控件
选中《编辑》按钮，打开配置界面的对话框时，浏览器捕捉到异常。

fanzhenyang commented 1 year ago

我的一运行就报错：版本号如下： "amis": "^2.9.0", "amis-core": "^2.9.0", "amis-editor": "^5.2.5-beta.5", "amis-editor-core": "^5.2.5-beta.6", "amis-formula": "^2.9.0", "amis-ui": "^2.9.0", "amis-widget": "^3.1.0", "react": "^17.0.2", "react-dom": "^17.0.2",

csx-bill commented 1 year ago

不支持 17.0.2

citynook commented 1 year ago

官网线上demo没有这个错误，但是下载官网源码直接编译运行就会报这个错误，这是什么原因？

citynook commented 1 year ago

现在官网都不理睬这类小问题了吗？

hyzx86 commented 1 year ago

换成下面试试？ "react": "^18.2.0", "react-dom": "^18.2.0",

citynook commented 1 year ago

换成下面试试？ "react": "^18.2.0", "react-dom": "^18.2.0",

我是从官网下载的源码，没有做任何修改，直接编译运行报的这个错误，官网源码用的react都是18.2的版本。

hyzx86 commented 1 year ago

😂那看来不是我环境问题了，我在umi里面也是这样，很多按钮不能用了部分组件无法拖拽

--- 2023年5月5日更新

因为我用了antd 主题，它里面很多样式不完整。导致交互出问题了

citynook commented 1 year ago

😂那看来不是我环境问题了，我在umi里面也是这样，很多按钮不能用了部分组件无法拖拽

我也不清楚是什么情况，官网的线上demo就是正常的，但下载源码运行就会报这个错误，谷歌浏览器也是最新版的~

citynook commented 1 year ago

如果在其它项目中集成，要用正式版本，amis-editor用beta版本会有异常错误。 "amis": "^2.9.0", "amis-core": "^2.9.0", "amis-editor": "^5.2.5",

hyzx86 commented 1 year ago

Editor 这个问题有点蛋疼~ 我也来看Editor源码了 W5$FYAC3R}Y J(5QS7Y036A

你们也用 iframe了么？

hyzx86 commented 1 year ago

如果在其它项目中集成，要用正式版本，amis-editor用beta版本会有异常错误。

@citynook 我认为 beta 应该是对大版本上小问题的修复补丁，应该不存在大版本比小版本更稳定吧

hyzx86 commented 1 year ago

谁知道 editor 的changelog 在哪里看啊？

citynook commented 1 year ago

@hyzx86 我是在其它项目中集成 amis 2.9，项目是 vite + vue3的前端，查看node_modules后，发现amis-edit是 5.2.5 版本，但它下载的依赖 amis-edit-core 却是 5.2.5.beta版本，版本不一致造成编译错误。

最开始package.json中只引用了 amis和amis-editor这两个，后面又添加了 amis-edit-core，保持和 amis-editor同一个版本，就不会发生错误了。

我没用iframe，是在vue文件里通过 "veaury": "2.3.12" 包引入 react组件实现的，可以运行，但会时不时发生错误，很头疼~

hyzx86 commented 1 year ago

我在 umi里头疼~

citynook commented 1 year ago

@hyzx86 如果项目是react的，集成amis应该不太容易出错，但集成到vue项目中，经常出错。下面是我在vue3里引用的依赖，经过反复验证。

"@fortawesome/fontawesome-free": "6.3.0",
"@types/react": "18.0.24",
"@types/react-dom": "18.0.8",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.60.0",
"vite-plugin-monaco-editor": "1.1.0",
"copy-to-clipboard": "3.3.1",
"veaury": "2.3.12",
"amis": "2.9.0",
"amis-editor": "5.2.5",
"amis-editor-core": "5.2.5"

vite.config.ts 也要添加 monaco-editor 要用到的资源，否则在编辑器里打开代码面板时会报错。

optimizeDeps: {
  esbuildOptions: {
    target: 'es2020',
  },
  // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
  include: [
    '@vue/runtime-core',
    '@vue/shared',
    '@iconify/iconify',
    'ant-design-vue/es/locale/zh_CN',
    'ant-design-vue/es/locale/en_US',
    'monaco-editor/esm/vs/language/json/json.worker',
    'monaco-editor/esm/vs/language/css/css.worker',
    'monaco-editor/esm/vs/language/html/html.worker',
    'monaco-editor/esm/vs/language/typescript/ts.worker',
    'monaco-editor/esm/vs/editor/editor.worker',
  ],
},

hyzx86 commented 1 year ago

monaco 不是有现成的组件么，你居然自己搞worker 去年我用vben 搞了一个版本，但是样式兼容问题太多，放弃了，如果有需要可以看看 https://github.com/EasyOC/EasyOC.VbenAdmin

hyzx86 commented 1 year ago

"@fortawesome/fontawesome-free": "6.3.0",

这东西官方文档明确说明只支持到 5

citynook commented 1 year ago

@hyzx86 你可能理解错了，vite里如果不引用 monaco-editor 的这些workder，amiseditor打开代码面板时会出错，我没有自己做任何worker，amis editor使用了monaco-editor。

"@fortawesome/fontawesome-free": "6.3.0" 这个也是amiseditor源码中引用的，我只是照常引用。

hyzx86 commented 1 year ago

"@fortawesome/fontawesome-free": "6.3.0" 这个也是amiseditor源码中引用的，我只是照常引用。

源码也没这么高。。

citynook commented 1 year ago

@hyzx86 确实没这么高，我升级了一下，没看到发生啥异常，就用着了

WangHao1221 commented 1 year ago

@hyzx86 如果项目是react的，集成amis应该不太容易出错，但集成到vue项目中，经常出错。下面是我在vue3里引用的依赖，经过反复验证。

"@fortawesome/fontawesome-free": "6.3.0",
"@types/react": "18.0.24",
"@types/react-dom": "18.0.8",
"react": "18.2.0",
"react-dom": "18.2.0",
"sass": "^1.60.0",
"vite-plugin-monaco-editor": "1.1.0",
"copy-to-clipboard": "3.3.1",
"veaury": "2.3.12",
"amis": "2.9.0",
"amis-editor": "5.2.5",
"amis-editor-core": "5.2.5"

vite.config.ts 也要添加 monaco-editor 要用到的资源，否则在编辑器里打开代码面板时会报错。

optimizeDeps: {
  esbuildOptions: {
    target: 'es2020',
  },
  // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
  include: [
    '@vue/runtime-core',
    '@vue/shared',
    '@iconify/iconify',
    'ant-design-vue/es/locale/zh_CN',
    'ant-design-vue/es/locale/en_US',
    'monaco-editor/esm/vs/language/json/json.worker',
    'monaco-editor/esm/vs/language/css/css.worker',
    'monaco-editor/esm/vs/language/html/html.worker',
    'monaco-editor/esm/vs/language/typescript/ts.worker',
    'monaco-editor/esm/vs/editor/editor.worker',
  ],
},

我用的webpack，没有用vite，是不是就不需要引入monnaco相关？我用的如下版本，浏览器控制台报错 e-router.esm-bundler.js:3295 Error: The renderer with name "bat-editor" has already exists, please try another name! at registerRenderer (factory.js:53:1) at registerFormItem (Item.js:868:1) at eval (Item.js:872:1) at DecorateConstructor (Reflect.js:541:1) at Reflect.decorate (Reflect.js:130:1) at Module.__decorate (tslib.es6.js:57:1) at eval (Editor.js:246:1) at eval (Editor.js:253:1) at Array.map () at eval (Editor.js:237:1) t

citynook commented 1 year ago

我也是前端小白，找个现成的vite + vue3 项目，集成的amis editor。因为是使用veaury插件在vue中加载react控件，所以在使用编辑器的时候，右侧面板经常会发生渲染错误，已经提了issue给veaury作者，但尚未有回复。

hyzx86 commented 1 year ago

我的问题解决了。。因为我定义的Rendder 有问题。。 UseEffect 里面做了一些坏事。。

WangHao1221 commented 1 year ago

我的问题解决了。。因为我定义的Rendder 有问题。。 UseEffect 里面做了一些坏事。。

你也是vue3+webpack5吗？可否看下package.json里面引用的相关版本以及.vue文件引入方式？核对下问题在哪里

hyzx86 commented 1 year ago

我是umi4 amis包全是最新的

---原始邮件--- 发件人: @.> 发送时间: 2023年5月5日(周五) 下午2:00 收件人: @.>; 抄送: "Tony @.**@.>; 主题: Re: [baidu/amis] 官网最新amis项目在运行编辑器的时候，报“mobx-state-tree”相关的错误 (Issue #6517)

我的问题解决了。。因为我定义的Rendder 有问题。。 UseEffect 里面做了一些坏事。。

你也是vue3+webpack5吗？可否看下package.json里面引用的相关版本以及.vue文件引入方式？核对下问题在哪里

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

WangHao1221 commented 1 year ago

我是umi4 amis包全是最新的 … ---原始邮件--- 发件人: @.> 发送时间: 2023年5月5日(周五) 下午2:00 收件人: @.>; 抄送: "Tony @.**@.>; 主题: Re: [baidu/amis] 官网最新amis项目在运行编辑器的时候，报“mobx-state-tree”相关的错误 (Issue #6517) 我的问题解决了。。因为我定义的Rendder 有问题。。 UseEffect 里面做了一些坏事。。你也是vue3+webpack5吗？可否看下package.json里面引用的相关版本以及.vue文件引入方式？核对下问题在哪里 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

用的umi啊，veaury版本是多少？.vue文件里面引入方式和我这个有区别吗?帮我看下哪里不对

hyzx86 commented 1 year ago

umi 是react 不用 veaury

WangHao1221 commented 1 year ago

umi 是react 不用 veaury

哎这可能就是兼容性的问题了，用react集成问题应该少很多，非常感谢啊！我再试试

citynook commented 1 year ago

react的项目，基本上按官方demo用就行了，vue还需要veaury才能使用amis-editor组件，而且偶尔会发生莫各其妙的错误，头大~

WangHao1221 commented 1 year ago

react的项目，基本上按官方demo用就行了，vue还需要veaury才能使用amis-editor组件，而且偶尔会发生莫各其妙的错误，头大~

是啊，主要现在问题就是在现有vue3+webpack+js基础上叠加

hyzx86 commented 1 year ago

@WangHao1221 你这好纠结啊。。。vue3 了干嘛还用 webpack 官方也用的vite

baidu / amis