# 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.

   ```typescript
   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).

   ```typescript
   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

```typescript
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>