alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

在parts造物平台导入的物料(react组件),到parts造物平台demo页面中--选择”从物料中心安装“安装成功后,将该组件拖到页面编辑区域,报错提示”组件渲染异常,请查看控制台日志“ #2833

Closed yunnode closed 9 months ago

yunnode commented 9 months ago

Describe the bug (required) / 详细描述 bug(必填)

A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述。

我发布了组件product-construction-component@0.0.4,并放到了part造物平台:

image

https://parts.lowcode-engine.cn/demo/design?id=t2elc&appType=lcc-lyaj9mql-oc&version=0.1.0 这是我添加了product-construction-component@0.0.4到低代码组件的造物页面链接

在parts造物平台导入的物料(react组件),到parts造物平台demo页面中--选择”从物料中心安装“安装成功后,将该组件拖到页面编辑区域,报错提示”组件渲染异常,请查看控制台日志“。

https://parts.lowcode-engine.cn/demo/design?id=t2elc&appType=lcc-lyaj9mql-oc&version=0.1.0

image image

报错内容:TypeError: Cannot read properties of undefined (reading 'map') at i.value (proto.3d119fc.js:1987:78629) at i.value (proto.3d119fc.js:1987:80621) at t.render (react-simulator-renderer.js:43:139932) at Ie (react-dom.production.min.js:104:8) at rh (react-dom.production.min.js:103:334) at zj (react-dom.production.min.js:228:490) at Th (react-dom.production.min.js:152:223) at tj (react-dom.production.min.js:152:152) at Te (react-dom.production.min.js:146:151) at react-dom.production.min.js:61:68

To Reproduce (required) / 如何复现 bug?(必填,非常重要)

Steps to reproduce the behavior: / 详细复现步骤: 如上面描述。

English version example:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior (required) / 预期行为(必填,非常重要)

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为 预期行为:将组件拖到页面编辑构建区域后,不报错,组件正常x渲染展示。

Screenshots (optional) / bug 截图(可选)

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题 1 2


Environments (please complete the following information) (required): / 请提供如下信息(必填)

eternalsky commented 9 months ago

稍等,一会有时间会看一下

eternalsky commented 9 months ago

目前 parts 还未开放低代码组件引入三方依赖,这里的入口应该隐藏,我这边帮你把这个依赖删掉?

yunnode commented 9 months ago

目前 parts 还未开放低代码组件引入三方依赖,这里的入口应该隐藏,我这边帮你把这个依赖删掉?

您好,我的核心诉求是可以在”普通组件“或”低代码组件“其中一种类型下,将我在parts造物平台引入的react组件,上架到托拉拽平台的组件列表中,然后我把我自己的组件拖到构建的页面中,实现我自定义的组件可以在托拉拽平台灵活使用的目标。

yunnode commented 9 months ago

社区同学们好,我想了解下如何准确上架组件到parts造物平台,并能在托拉拽平台中正确使用,麻烦解答下。

eternalsky commented 9 months ago

@yunnode react 组件导入后,不需要通过低代码组件,这两个过程不是要和到一起去用的。详细请看文档说明:https://lowcode-engine.cn/site/docs/guide/expand/editor/parts/prototype

eternalsky commented 9 months ago

目前 parts 还未开放低代码组件引入三方依赖,这里的入口应该隐藏,我这边帮你把这个依赖删掉?

您好,我的核心诉求是可以在”普通组件“或”低代码组件“其中一种类型下,将我在parts造物平台引入的react组件,上架到托拉拽平台的组件列表中,然后我把我自己的组件拖到构建的页面中,实现我自定义的组件可以在托拉拽平台灵活使用的目标。

你是说的托拉拽平台是指的哪个,自己用 lowcode-engine 搭建的吗

yunnode commented 9 months ago

目前 parts 还未开放低代码组件引入三方依赖,这里的入口应该隐藏,我这边帮你把这个依赖删掉?

您好,我的核心诉求是可以在”普通组件“或”低代码组件“其中一种类型下,将我在parts造物平台引入的react组件,上架到托拉拽平台的组件列表中,然后我把我自己的组件拖到构建的页面中,实现我自定义的组件可以在托拉拽平台灵活使用的目标。

你是说的托拉拽平台是指的哪个,自己用 lowcode-engine 搭建的吗

我说的拖拉拽平台是指这个:https://parts.lowcode-engine.cn/demo/design?id=t2elc&appType=lcc-lyaj9mql-oc&version=0.1.0

eternalsky commented 9 months ago

@yunnode 这是 parts 用来调试低代码组件的,不是一个完整的搭建应用的平台,不提供三方组件接入。

yunnode commented 9 months ago

@yunnode 这是 parts 用来调试低代码组件的,不是一个完整的搭建应用的平台,不提供三方组件接入。

那我应该在哪里接入第三方组件呢,麻烦帮看下 。

yunnode commented 9 months ago

@yunnode react 组件导入后,不需要通过低代码组件,这两个过程不是要和到一起去用的。详细请看文档说明:https://lowcode-engine.cn/site/docs/guide/expand/editor/parts/prototype

您好,我组件已导入“parts造物平台”,现在添加组件配置,您帮看下这个配置的正确不?

image

我点击了上面“确定”按钮 ,目前显示这样的状态,这个反馈是正确的么?

image
eternalsky commented 9 months ago

@yunnode 不明白你的意思,你要去哪里接入第三方组件是你的个人需求,我无法给你推荐。我只是以 parts 的角度告诉你,你刚才说的这个链接,不提供开发页面的功能。

eternalsky commented 9 months ago

@yunnode 是否正确,请参考文档来。配置正确,你的组件可以在调试页面中显示出来。配置不正确,就显示不出来

yunnode commented 9 months ago

@yunnode 是否正确,请参考文档来。配置正确,你的组件可以在调试页面中显示出来。配置不正确,就显示不出来

您说的调试页面是指哪个,方便贴一下链接么?

eternalsky commented 9 months ago

@yunnode 是否正确,请参考文档来。配置正确,你的组件可以在调试页面中显示出来。配置不正确,就显示不出来

您说的调试页面是指哪个,方便贴一下链接么?

文档里有说明,按照文档一步步操作即可。

eternalsky commented 9 months ago

@yunnode 代码解析中的状态是正确的,你也可以直接点击右侧的配置,进入配置状态。

yunnode commented 9 months ago

@yunnode 代码解析中的状态是正确的,你也可以直接点击右侧的配置,进入配置状态。

我的组件添加配置后,显示是这样的,这是正常的么? 我看network中有个请求https://parts.lowcode-engine.cn/_view/uipaas/query/material/versions.json?x-csrf-token=RdlfEBt2-LSTG14twYahHyVYAGMJcIPk5vNE&id=32904返回: { "success": false, "errorCode": 500, "errorMsg": "Connect timeout for 5000ms, GET https://registry.npmjs.org/product-construction-component -2 (connected: false, keepalive socket: false, agent status: {\"createSocketCount\":25,\"createSocketErrorCount\":0,\"closeSocketCount\":25,\"errorSocketCount\":0,\"timeoutSocketCount\":12,\"requestCount\":13,\"freeSockets\":{},\"sockets\":{},\"requests\":{}}, socketHandledRequests: 1, socketHandledResponses: 0)\nheaders: {}" }

image
eternalsky commented 9 months ago

@yunnode 代码解析中的状态是正确的,你也可以直接点击右侧的配置,进入配置状态。

我的组件添加配置后,显示是这样的,这是正常的么? 我看network中有个请求https://parts.lowcode-engine.cn/_view/uipaas/query/material/versions.json?x-csrf-token=RdlfEBt2-LSTG14twYahHyVYAGMJcIPk5vNE&id=32904返回: { "success": false, "errorCode": 500, "errorMsg": "Connect timeout for 5000ms, GET https://registry.npmjs.org/product-construction-component -2 (connected: false, keepalive socket: false, agent status: {"createSocketCount":25,"createSocketErrorCount":0,"closeSocketCount":25,"errorSocketCount":0,"timeoutSocketCount":12,"requestCount":13,"freeSockets":{},"sockets":{},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)\nheaders: {}" } image

直接点配置,进入配置界面就行了,接下来继续按照文档的说明来。

yunnode commented 9 months ago

@yunnode 代码解析中的状态是正确的,你也可以直接点击右侧的配置,进入配置状态。

我的组件添加配置后,显示是这样的,这是正常的么? 我看network中有个请求https://parts.lowcode-engine.cn/_view/uipaas/query/material/versions.json?x-csrf-token=RdlfEBt2-LSTG14twYahHyVYAGMJcIPk5vNE&id=32904返回: { "success": false, "errorCode": 500, "errorMsg": "Connect timeout for 5000ms, GET https://registry.npmjs.org/product-construction-component -2 (connected: false, keepalive socket: false, agent status: {"createSocketCount":25,"createSocketErrorCount":0,"closeSocketCount":25,"errorSocketCount":0,"timeoutSocketCount":12,"requestCount":13,"freeSockets":{},"sockets":{},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)\nheaders: {}" } image

直接点配置,进入配置界面就行了,接下来继续按照文档的说明来。

您好,我进入配置页面,配置组件属性后,点预览,一直停留在了“组件构建中...”,已经过了很久了。

image image

我又看了下,一直报这个错误。死循环了。

image

这个接口:https://parts.lowcode-engine.cn/_view/uipaas/query/prototype/buildResult.json?taskId=undefined-componentBuilder-d5be5b44-da6e-43ed-8d7d-81278185c737 一直返回:{ "success": false, "errorCode": 500, "errorMsg": "Cannot read property 'message' of undefined" }

yunnode commented 9 months ago

@yunnode 不明白你的意思,你要去哪里接入第三方组件是你的个人需求,我无法给你推荐。我只是以 parts 的角度告诉你,你刚才说的这个链接,不提供开发页面的功能。

目前是在parts造物平台已将我的react组件导入进来了,接下来我在哪里使用呢?我希望可以在https://lowcode-engine.cn/demo/demo-general/index.html 这里来使用我在“parts造物平台”中导入的自定义react组件,到底应该如何做呢?或者说这种方式不支持,那有其他什么方法可以帮助实现的么?这个问题真的很紧急,困扰了很久了,麻烦社区同学帮忙看下。

f4b63eceaa62740b29542716e7e8601a
eternalsky commented 9 months ago

@yunnode 文档里有说明,请仔细查看。在最后的使用篇章里有讲怎么在 lowcode-engine 的项目中使用。

yunnode commented 9 months ago

@yunnode 文档里有说明,请仔细查看。在最后的使用篇章里有讲怎么在 lowcode-engine 的项目中使用。

您好,麻烦问下,您说的“最后的使用篇章”是哪一部分,麻烦看下是截图的哪一小节呢?

image
yunnode commented 9 months ago

资产包构建了3次,都构建失败,在哪里可以看到构建失败的原因呢?着急使用构建后的资产包。@eternalsky

image
eternalsky commented 9 months ago

我看构建你已经另外提了 issue,那这个 issue 相关的问题感觉已经基本清楚了。先 close 了,构建的问题在新的 issue 里继续跟进。