Skip to main content

Component Not Found Errors in Materials

Preview mode: antd asset packages load in order but do not execute in order​

Asset packages load in order but do not execute in order, so some scripts run before their dependencies are ready and throw errors. The components value passed to @rchh/lowcode-react-renderer is empty.

Solution

Upgrade LowCodeEngine to 1.0.8

Related PR: https://github.com/alibaba/lowcode-engine/pull/383

Edit mode: snippets and injected components do not match​

  1. In the console, run:
AliLowCodeEngine.material.componentsMap

Check whether the material configuration is correct.

image.png

If it looks correct, continue. LowCodeEngine needs to be upgraded to 1.0.10

AliLowCodeEngine.project.simulator.renderer.components

Check whether the corresponding material exists. If not, troubleshoot the material.

If it is not correct, inspect the asset package configuration. The components field in the asset package is related to how material.componentsMap is generated.

For example, if material metadata lives in the @rchh/lowcode-materials package, add the following to components:

"components": [{
  "exportName": "AlilcLowcodeMaterialsMeta",
  "npm": {
    "package": "@rchh/lowcode-materials"
  },
  "url": "https://alifd.alicdn.com/npm/@rchh/lowcode-materials@1.0.7/build/lowcode/meta.js",
  "urls": {
    "default": "https://alifd.alicdn.com/npm/@rchh/lowcode-materials@1.0.7/build/lowcode/meta.js",
    "design": "https://alifd.alicdn.com/npm/@rchh/lowcode-materials@1.0.7/build/lowcode/meta.design.js"
  }
}]

If material.componentsMap does not contain the component, there are two possible causes:

  • The corresponding material was not added to the components field
  • The components configuration is incorrect. Check that the URL loads correctly and that exportName is correct—that is, window.${exportName} exists.
  1. Select the component and run in the console:
AliLowCodeEngine.project.currentDocument.selection.getNodes()[0].exportSchema('render')

Check whether componentName matches.

  1. Call the rerender method:
AliLowCodeEngine.project.simulator.rerender()

See whether the issue is resolved.

Troubleshooting materials​

Find the asset package for the component—for example, the package below:

{
  "package": "@yingzhi8/lowcode-public-package",
  "version": "0.1.2",
  "library": "BizComps",
  "urls": [
    "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.js",
    "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.css"
  ],
  "editUrls": [
    "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/view.js",
    "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/view.css"
  ],
  "advancedUrls": {
    "default": [
      "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.js",
      "https://unpkg.com/@yingzhi8/lowcode-public-package@0.1.2/build/lowcode/render/default/view.css"
    ]
  },
  "advancedEditUrls": {}
}

Check whether URLs load​

Inspect the console to see which URLs were loaded.

Check whether library is configured correctly​

library is the global variable accessible on the canvas. To verify it, run in the console:

AliLowCodeEngine.project.simulator.contentWindow.${library}