AUR0752

Error Message

AUR0752: Element <element-name> is not registered in <component-name>.

Where <element-name> is the name of the custom element used in the template, and <component-name> is the name of the component whose template is being rendered.

Description

This error occurs during the rendering phase when Aurelia tries to process a custom element used in a template (e.g., <my-element></my-element>), but it cannot find the corresponding definition for that element (my-element) within the resources registered for the current component or globally.

Cause

The common causes for this error are:

1. Missing Import: The custom element class was not imported into the component's view model file where its template is being used.

2. Missing dependencies Array: The custom element was imported, but it was not included in the static dependencies array of the component's definition or the @customElement decorator's dependencies option. Aurelia relies on this array to know which resources are needed for the template.

3. Typo in Element Name: The name used in the template (e.g., <my-elemnt>) does not exactly match the registered name of the custom element (e.g., my-element). Element names are case-insensitive in HTML but often defined with kebab-case.

4. Incorrect Registration: The custom element might be defined in a separate package or file but was not correctly registered globally (using Aurelia.register(...)) or locally via the dependencies array.

5. Build/Bundling Issues: The build process might not be correctly including or bundling the custom element definition, making it unavailable at runtime.

Solution

1. Import the Element: Ensure the custom element class is imported in the view model file (.ts) of the component using it.

2. Add to Dependencies: Add the imported custom element class to the dependencies array in the component's definition.

   import { MyElement } from './my-element';
   import { customElement } from 'aurelia';
   
   @customElement({
     name: 'my-component',
     template: `<my-element></my-element>`,
     dependencies: [MyElement] // <-- Add here
   })
   export class MyComponent { }

   Or, if using a static property:

   import { MyElement } from './my-element';
   
   export class MyComponent {
     static dependencies = [MyElement]; // <-- Add here
     // ... rest of the component definition
   }

3. Verify Name: Double-check the element name used in the template matches the name defined in the @customElement decorator or the element's definition. Remember standard HTML practice uses kebab-case (e.g., my-element).

4. Check Registration: If the element comes from another package or is intended for global use, ensure it's registered correctly with the Aurelia instance (Aurelia.register(MyElementConfiguration)).

5. Verify Build: Ensure your build/bundler configuration is correctly processing and including the custom element file.

Debugging Tips

• Check the browser's console for the exact error message, noting the element name and the component name.

• Verify the import path for the custom element in the view model.

• Confirm the element class is present in the dependencies array.

• Search the codebase for the custom element's definition to ensure the name matches.

• Look at the compiled/bundled output in the browser's developer tools (Sources tab) to see if the element's code seems to be present.