错误：没有为元素定义 Aurelia API：“DIV”

Posted 2023-03-28

【中文标题】错误：没有为元素定义 Aurelia API：“DIV”

【英文标题】：Error: No Aurelia APIs are defined for the element: "DIV"

【发布时间】：2021-11-06 07:57:20

【问题描述】：

我在新启动的应用程序中遇到了这个问题。

Error: No Aurelia APIs are defined for the element: "DIV".

这是调用堆栈：

getAU webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5384
    locateAPI webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5415
    createBinding webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5401
    applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2527
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4449
    applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2521
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2622
    addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1228
    _standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
    instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
    itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    _show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1229
    _standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
    instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
    itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    _show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    automate webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3756
    _createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4945
    promise callback*_createControllerAndSwap/< webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4944
    promise callback*_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4942
    compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5044
    compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5310
    setRoot webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:538
    configure webpack:///./app/bootstrap.ts?:36
    __awaiter webpack:///./app/bootstrap.ts?:12
    __awaiter webpack:///./app/bootstrap.ts?:8
    configure webpack:///./app/bootstrap.ts?:36
    promise callback*configure/< webpack:///./app/bootstrap.ts?:36
    __awaiter webpack:///./app/bootstrap.ts?:12
    __awaiter webpack:///./app/bootstrap.ts?:8
    configure webpack:///./app/bootstrap.ts?:24
    config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:105
    promise callback*config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:100
    p webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:136
    promise callback*bootstrap webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:135
    run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:122
    promise callback*run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:117
    <anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:142
    <anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:143
    b9nV http://localhost:8080/vendors~._node_modules_an.120e77e838c03acac253.chunk.js:83
    __webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:5
    0 http://localhost:8080/app~._a.120e77e838c03acac253.chunk.js:10
    __webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
    checkDeferredModules http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:46
    webpackJsonpCallback http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:33
    <anonymous> http://localhost:8080/app~._app_mocks-temporary_schema.ts~81270b51.120e77e838c03acac253.chunk.js:1
aurelia-bootstrapper.js:127:16

我在网上进行了研究，但我在这里只发现了一个类似的问题：https://github.com/aurelia/webpack-plugin/issues/181 但它不相关，因为我不使用 webpack 5 而是 4。

aurelia debug 的最后一条日志是这个：

DEBUG [templating] importing resources for app.html 
Array []

我的应用程序不直接引用 div，而且相当简单。我正在使用外部库（我们也开发）并加载如下：

export async function configure (aurelia: Aurelia): Promise<Aurelia> 
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-validation'), config => 
      config.customValidator(AjvValidator);
    )
    .plugin(PLATFORM.moduleName('web-shared-components'))
    .plugin(PLATFORM.moduleName('web-template-designer'))
    .feature(PLATFORM.moduleName('views/index'));

  if (debugMode) 
    aurelia.use.developmentLogging();
  

  return aurelia.start().then(async () => await aurelia.setRoot(PLATFORM.moduleName('app')));

这是 app.html：

<template>
  <designer></designer>
</template>

和designer.html：

<template>
    <template-designer record-type-template.two-way="recordTypeTemplate"
       schema.bind="schema"
       is-valid.two-way="isValid"
       is-dirty.two-way="isDirty"
       on-save.call="handleSave()"
       on-exit.call="handleExit()"
       on-preview.call="handlePreview(requestNewTestData)"></template-designer>
</template>

我对可能导致此问题的原因有些茫然，因此欢迎提供任何指导。

谢谢

【参考方案1】：

发现了问题，这是第三方之一缺少依赖项。 Aurelia 无法解析其中一个模板 div 上的自定义标记。