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

Question

I am facing this issue with my newly started app.

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

This is the call stack:

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

I researched online but I only found a similar issue here: https://github.com/aurelia/webpack-plugin/issues/181 but it's not related as I don't use webpack 5 but 4.

The last log from aurelia debug is this one:

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

My app does not reference a div directly, and is fairly simple. I am using a external libraries (that we also develop) and load as follows:

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')));
}

This is app.html:

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

and the 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>

I'm a bit at a loss as to what could be causing this issue so any guidance is welcome.

Thanks

score 0 · Answer 1 · answered Sep 10 '21 at 14:48

0

Found the issue, it was a missing dependency in one of the third parties. Aurelia was not able to resolve a custom tag on one of the template divs.

answered Sep 10 '21 at 14:48

Moustachiste

412
4
14

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

1 Answers1