AUR0761

Error Message

AUR0761: Cannot create a custom element definition with only a name and no type: <Name>

Where <Name> is the string provided as the element name.

Description

This error occurs when attempting to define a custom element using the CustomElement.define() method (or implicitly through registration) by providing only a name string, or a definition object that solely contains a name, without associating it with a view model class (constructor function). Aurelia requires a class to associate with the element's behavior and lifecycle.

Cause

This error typically arises in less common scenarios, such as:

1. Manual Definition Error: Incorrectly calling CustomElement.define("my-element") without providing the corresponding class MyElementViewModel.

2. Registration Issues: Trying to register just a name string with the dependency injection container expecting it to resolve to a custom element definition, without a corresponding class registration.

3. Dynamic Generation Problems: Errors in code that dynamically generates custom element definitions might lead to attempts to define elements with only names.

Solution

The fundamental solution is to always provide a view model class (constructor) when defining a custom element.

1. Provide Class to define: When using CustomElement.define, ensure you pass both the name/definition object and the class.

   import { CustomElement } from 'aurelia';
   import MyElementViewModel from './my-element'; // The class
   
   // Correct ways to call define:
   CustomElement.define({ name: 'my-element', template: '...' }, MyElementViewModel);
   // or if MyElementViewModel is decorated with @customElement:
   CustomElement.define('my-element', MyElementViewModel); // Name can be inferred if decorator exists
   CustomElement.define(MyElementViewModel); // Name and template inferred if decorator exists

2. Correct Registration: Ensure that when registering elements (e.g., globally in main.ts or locally via dependencies), you are registering the class itself, allowing Aurelia to find its definition (usually via the @customElement decorator).

   import { MyElementViewModel } from './my-element';
   import { Aurelia } from 'aurelia';
   
   Aurelia.register(MyElementViewModel /* register the class */)
          // ...

3. Review Dynamic Code: If generating definitions dynamically, ensure the logic correctly associates a generated or existing class with the element name before attempting definition.

Example

import { CustomElement, customElement } from 'aurelia';

// A valid view model class is required
@customElement({ name: 'my-element', template: '<div>Hello</div>' })
export class MyElementViewModel {
  message = 'Hello from My Element';
}

// Incorrect: Trying to define only by name string
// CustomElement.define('another-element'); // Throws AUR0761

// Incorrect: Trying to define with an object containing only the name
// CustomElement.define({ name: 'yet-another-element' }); // Throws AUR0761

// Correct: Defining with name and class
CustomElement.define('my-element-programmatic', MyElementViewModel);

// Correct: Defining with definition object and class
CustomElement.define({ name: 'my-config-element', template: '<span>Config</span>' }, class ConfigElement {});

// Correct: Registering the class (most common approach)
// In main.ts or component dependencies:
// register(MyElementViewModel)

Debugging Tips

• Identify where CustomElement.define is being called or where the element registration occurs.

• Verify that a valid class (constructor function) is being passed alongside the name or definition object.

• If using decorators (@customElement), ensure the decorator is correctly applied to the class you intend to register. Registration typically involves the class itself, not just its name.

</rewritten_file>