🐛 [Bug]: 自定义组件库中引入 element plus，画布和 preview 无法正确渲染内嵌的 element plus 组件

[jiahao-hub]

Environment

None

Version

20

Version

2.7

Link to minimal reproduction

组件库复现样例：
https://github.com/jiahao-hub/demo-component-lib

Step to reproduce

准备组件库 CDN

1. Clone 组件库

   git clone https://github.com/jiahao-hub/demo-component-lib
   

2. 安装依赖

   pnpm i
   

3. 打包

   pnpm run build
   

4. 启动模拟 CDN 服务器，用于给物料使用

   node cdnMockupServer.js
   

5. 展示组件库的 demo

   pnpm run dev
   

物料

materials/components/DemoCounter.json

{
  "component": "Counter",
  "name": {
    "zh_CN": "测试"
  },
  "icon": "button",
  "group": "Demo",
  "category": "Demo 组件库",
  "description": "",
  "tags": "",
  "keywords": "",
  "doc_url": "",
  "devMode": "proCode",
  "npm": {
    "package": "demo-lib",
    "exportName": "Counter",
    "destructuring": true
  },
  "configure": {
    "loop": true,
    "condition": true,
    "styles": true,
    "isContainer": false,
    "isModal": false,
    "isPopper": false,
    "isNullNode": false,
    "isLayout": false,
    "nestingRule": {
      "childWhitelist": "",
      "parentWhitelist": "",
      "descendantBlacklist": "",
      "ancestorWhitelist": ""
    },
    "rootSelector": "",
    "shortcuts": {
      "properties": [
        "count"
      ]
    },
    "contextMenu": {
      "actions": [
        "copy",
        "remove",
        "insert",
        "updateAttr",
        "bindEevent"
      ],
      "disable": []
    },
    "clickCapture": true,
    "framework": "Vue"
  },
  "schema": {
    "properties": [
      {
        "name": "0",
        "label": {
          "zh_CN": "基础属性"
        },
        "description": {
          "zh_CN": "组件的核心功能相关属性"
        },
        "content": [
          {
            "property": "count",
            "label": {
              "text": {
                "zh_CN": "计数"
              }
            },
            "description": "当前计数值",
            "required": false,
            "readOnly": false,
            "disabled": false,
            "cols": 12,
            "labelPosition": "left",
            "type": "number",
            "defaultValue": 0,
            "widget": {
              "component": "NumberConfigurator",
              "props": {
                "step": 1
              }
            }
          }
        ]
      }
    ],
    "events": {
      "onClickButton": {
        "name": "onClickButton",
        "description": "点击按钮时触发",
        "functionInfo": {
          "params": []
        }
      }
    },
    "slots": {}
  },
  "snippets": [
    {
      "name": {
        "zh_CN": "Counter"
      },
      "icon": "button",
      "snippetName": "Counter",
      "schema": {
        "props": {
          "count": 10
        }
      }
    }
  ]
}

materials/components/DemoHelloWorld.json

{
  "component": "HelloWorld",
  "name": {
    "zh_CN": "Hello World"
  },
  "icon": "HelloWorld",
  "group": "Demo",
  "category": "Demo 组件库",
  "description": "",
  "tags": "",
  "keywords": "",
  "doc_url": "",
  "devMode": "proCode",
  "npm": {
    "package": "demo-lib",
    "exportName": "HelloWorld",
    "destructuring": true
  },
  "configure": {
    "loop": true,
    "condition": true,
    "styles": true,
    "isContainer": false,
    "isModal": false,
    "isPopper": false,
    "isNullNode": false,
    "isLayout": false,
    "nestingRule": {
      "childWhitelist": "",
      "parentWhitelist": "",
      "descendantBlacklist": "",
      "ancestorWhitelist": ""
    },
    "rootSelector": "",
    "shortcuts": {
      "properties": [
        "msg"
      ]
    },
    "contextMenu": {
      "actions": [
        "copy",
        "remove",
        "insert",
        "updateAttr",
        "bindEevent"
      ],
      "disable": []
    },
    "framework": "Vue"
  },
  "schema": {
    "properties": [
      {
        "name": "0",
        "label": {
          "zh_CN": "基础属性"
        },
        "description": {
          "zh_CN": "组件的核心功能相关属性"
        },
        "content": [
          {
            "property": "msg",
            "label": {
              "text": {
                "zh_CN": "消息"
              }
            },
            "description": "显示在组件中的消息文本",
            "required": true,
            "readOnly": false,
            "disabled": false,
            "cols": 12,
            "labelPosition": "left",
            "type": "string",
            "defaultValue": "",
            "widget": {
              "component": "InputConfigurator",
              "props": {
                "placeholder": "请输入..."
              }
            }
          }
        ]
      }
    ],
    "events": {},
    "slots": {}
  },
  "snippets": [
    {
      "name": {
        "zh_CN": "Hello World"
      },
      "icon": "HelloWorld",
      "snippetName": "HelloWorld",
      "schema": {
        "props": {
          "msg": "World"
        }
      }
    }
  ]
}

materials/packages.json

{
  "packages": [
    {
      "name": "TinyVue组件库",
      "package": "@opentiny/vue",
      "version": "3.20.0",
      "destructuring": true,
      "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/~3.20/files/dist3/tiny-vue-pc.mjs",
      "css": "https://registry.npmmirror.com/@opentiny/vue-theme/~3.20/files/index.css"
    },
    {
      "name": "element-plus组件库",
      "package": "element-plus",
      "version": "2.10.2",
      "destructuring": true,
      "script": "https://registry.npmmirror.com/element-plus/2.10.2/files/dist/index.full.mjs",
      "css": "https://registry.npmmirror.com/element-plus/2.10.2/files/dist/index.css"
    },
    {
      "name": "demo-lib 组件库",
      "package": "demo-lib",
      "version": "0.0.1",
      "destructuring": true,
      "script": "http://localhost:3000/dist/demo-lib.es.js",
      "css": "http://localhost:3000/dist/style.css"
    }
  ]
}

操作

拖入Demo 组件库/Counter 组件

What is expected

自定义组件库可以被画布和 preview 正常渲染，与自定义组件库 play (pnpm run dev) 下的效果一样

What is actually happening

组件未被正确渲染

控制台有 Warning， el-input 和 el-button 加载失败

What is your project name

None

Any additional comments (optional)

虽然我已经在 Package 中引入了 element plus，但是在渲染时只会使用组件配置的组件库，组件库没有将 element plus bundled 进包中。我应该如何处理这样的情况，才能组件库正确渲染到画布上

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: Introducing element plus, canvas and preview into the custom component library does not render the embedded element plus components correctly

Environment

None

Version

20

Version

2.7

Link to minimum reproduction

Example of component library reproduction:
https://github.com/jiahao-hub/demo-component-lib

Step to reproduce

Prepare component library CDN

1. Clone component library

   git clone https://github.com/jiahao-hub/demo-component-lib
   

2. Installation dependencies

   pnpm i
   

3. Packing

   pnpm run build
   

4. Start the simulated CDN server for use of materials

   node cdnMockupServer.js
   

5. Demonstrate the demo of the component library

   pnpm run dev
   

Material

materials/components/DemoCounter.json

{
  "component": "Counter",
  "name": {
    "zh_CN": "Test"
  },
  "icon": "button",
  "group": "Demo",
  "category": "Demo component library",
  "description": "",
  "tags": "",
  "keywords": "",
  "doc_url": "",
  "devMode": "proCode",
  "npm": {
    "package": "demo-lib",
    "exportName": "Counter",
    "destructuring": true
  },
  "configure": {
    "loop": true,
    "condition": true,
    "styles": true,
    "isContainer": false,
    "isModal": false,
    "isPopper": false,
    "isNullNode": false,
    "isLayout": false,
    "nestingRule": {
      "childWhitelist": "",
      "parentWhitelist": "",
      "descendantBlacklist": "",
      "ancestorWhitelist": ""
    },
    "rootSelector": "",
    "shortcuts": {
      "properties": [
        "count"
      ]
    },
    "contextMenu": {
      "actions": [
        "copy",
        "remove",
        "insert",
        "updateAttr",
        "bindEevent"
      ],
      "disable": []
    },
    "clickCapture": true,
    "framework": "Vue"
  },
  "schema": {
    "properties": [
      {
        "name": "0",
        "label": {
          "zh_CN": "Basic Properties"
        },
        "description": {
          "zh_CN": "Core Function-related Attributes of Components"
        },
        "content": [
          {
            "property": "count",
            "label": {
              "text": {
                "zh_CN": "Count"
              }
            },
            "description": "current count value",
            "required": false,
            "readOnly": false,
            "disabled": false,
            "cols": 12,
            "labelPosition": "left",
            "type": "number",
            "defaultValue": 0,
            "widget": {
              "component": "NumberConfigurator",
              "props": {
                "step": 1
              }
            }
          }
        ]
      }
    ],
    "events": {
      "onClickButton": {
        "name": "onClickButton",
        "description": "Flashed when clicking a button",
        "functionInfo": {
          "params": []
        }
      }
    },
    "slots": {}
  },
  "snippets": [
    {
      "name": {
        "zh_CN": "Counter"
      },
      "icon": "button",
      "snippetName": "Counter",
      "schema": {
        "props": {
          "count": 10
        }
      }
    }
  ]
}

materials/components/DemoHelloWorld.json

{
  "component": "HelloWorld",
  "name": {
    "zh_CN": "Hello World"
  },
  "icon": "HelloWorld",
  "group": "Demo",
  "category": "Demo component library",
  "description": "",
  "tags": "",
  "keywords": "",
  "doc_url": "",
  "devMode": "proCode",
  "npm": {
    "package": "demo-lib",
    "exportName": "HelloWorld",
    "destructuring": true
  },
  "configure": {
    "loop": true,
    "condition": true,
    "styles": true,
    "isContainer": false,
    "isModal": false,
    "isPopper": false,
    "isNullNode": false,
    "isLayout": false,
    "nestingRule": {
      "childWhitelist": "",
      "parentWhitelist": "",
      "descendantBlacklist": "",
      "ancestorWhitelist": ""
    },
    "rootSelector": "",
    "shortcuts": {
      "properties": [
        "msg"
      ]
    },
    "contextMenu": {
      "actions": [
        "copy",
        "remove",
        "insert",
        "updateAttr",
        "bindEevent"
      ],
      "disable": []
    },
    "framework": "Vue"
  },
  "schema": {
    "properties": [
      {
        "name": "0",
        "label": {
          "zh_CN": "Basic Properties"
        },
        "description": {
          "zh_CN": "Core Function-related Attributes of Components"
        },
        "content": [
          {
            "property": "msg",
            "label": {
              "text": {
                "zh_CN": "Message"
              }
            },
            "description": "Message text displayed in the component",
            "required": true,
            "readOnly": false,
            "disabled": false,
            "cols": 12,
            "labelPosition": "left",
            "type": "string",
            "defaultValue": "",
            "widget": {
              "component": "InputConfigurator",
              "props": {
                "placeholder": "Please enter..."
              }
            }
          }
        ]
      }
    ],
    "events": {},
    "slots": {}
  },
  "snippets": [
    {
      "name": {
        "zh_CN": "Hello World"
      },
      "icon": "HelloWorld",
      "snippetName": "HelloWorld",
      "schema": {
        "props": {
          "msg": "World"
        }
      }
    }
  ]
}

materials/packages.json

{
  "packages": [
    {
      "name": "TinyVue component library",
      "package": "@opentiny/vue",
      "version": "3.20.0",
      "destructuring": true,
      "script": "https://registry.npmmirror.com/@opentiny/vue-runtime/~3.20/files/dist3/tiny-vue-pc.mjs",
      "css": "https://registry.npmmirror.com/@opentiny/vue-theme/~3.20/files/index.css"
    },
    {
      "name": "element-plus component library",
      "package": "element-plus",
      "version": "2.10.2",
      "destructuring": true,
      "script": "https://registry.npmmirror.com/element-plus/2.10.2/files/dist/index.full.mjs",
      "css": "https://registry.npmmirror.com/element-plus/2.10.2/files/dist/index.css"
    },
    {
      "name": "demo-lib component library",
      "package": "demo-lib",
      "version": "0.0.1",
      "destructuring": true,
      "script": "http://localhost:3000/dist/demo-lib.es.js",
      "css": "http://localhost:3000/dist/style.css"
    }
  ]
}

operate

Drag into the Demo Component Library/Counter component

What is expected

Custom component library can be rendered normally by canvas and preview, the same effect as the custom component library play (pnpm run dev)

What is actually happening

Component not rendered correctly

The console has Warning, el-input and el-button loading failed

What is your project name

None

Any additional comments (optional)

Although I have introduced element plus in Package, I only use the component library configured by the component when rendering, and the component library does not bundled element plus into the package. How should I handle such a situation so that the component library can be rendered correctly to the canvas

[chilingling]

您当前的组件打包方式需要全局有 element-plus 的相关组件实例。

import-map 的版本需要显式的 import。
比如：

import { ElButton } from 'element-plus'

resolveCcomponent(ElButton)

建议您修改打包方式

[jiahao-hub]

感谢您的支持，我们为TinyEngine 的 CDN 做了一套独立的打包方式，可以解决这个问题。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Thank you for your support, we have made an independent package method for TinyEngine's CDN to solve this problem.