# AUR0766

## Error Message

`AUR0766: Invalid @processContent hook. Expected the hook to be a function (when defined in a class, it needs to be a static function) but got a <type>.`

Where `<type>` is the `typeof` the invalid value found (e.g., 'undefined', 'object', 'string').

## Description

This error occurs when Aurelia encounters an invalid configuration for a `processContent` hook, which allows custom elements to modify their compiled template definition before instances are created. The hook must be a function, and if it's defined as a method on the custom element class itself, it *must* be a `static` method.

## Cause

1. **Decorator on Instance Method/Property:** Applying the `@processContent` decorator to a regular instance method or property of a custom element class, instead of a `static` method.

   ```typescript
   import { customElement, processContent } from 'aurelia';

   @customElement({ name: 'my-element', template: '...' })
   export class MyElement {
     // Incorrect: Decorator on an instance method
     @processContent
     process(node: HTMLElement) { /* ... */ }
   }
   ```
2. **Hook is Not a Function:** Providing a value for the `processContent` property in a custom element definition object that is not a function.

   ```typescript
   import { CustomElement } from 'aurelia';

   class MyElementViewModel { /* ... */ }

   // Incorrect: processContent is a string, not a function
   CustomElement.define({
     name: 'my-element',
     template: '...',
     processContent: 'should-be-a-function'
   }, MyElementViewModel);
   ```
3. **Incorrect Decorator Usage:** Misusing the decorator in a way that prevents it from correctly associating the static method (though this is less common).

## Solution

1. **Use a Static Method:** If defining the hook as a method on the custom element class, ensure it is marked `static`.

   ```typescript
   import { customElement, processContent, INode, IPlatform } from 'aurelia';

   @customElement({ name: 'my-element', template: '...' })
   export class MyElement {
     // Correct: Decorator on a static method
     @processContent
     static process(node: INode, platform: IPlatform) { // Signature may vary
       // Hook logic to modify the template node before compilation
       // Return true to indicate nodes may have been added/removed,
       // return false or void otherwise.
       return false;
     }
   }
   ```
2. **Provide a Function:** If defining the hook via the definition object, ensure the value provided for the `processContent` property is a standalone function.

   ```typescript
   import { CustomElement, INode, IPlatform } from 'aurelia';

   class MyElementViewModel { /* ... */ }

   // Correct: processContent is a function
   const myProcessContentHook = (node: INode, platform: IPlatform) => {
     // Hook logic...
     return false;
   };

   CustomElement.define({
     name: 'my-element',
     template: '...',
     processContent: myProcessContentHook
   }, MyElementViewModel);
   ```

## Debugging Tips

* Check any class using the `@processContent` decorator. Verify the decorator is applied *only* to a `static` method within that class.
* If defining elements programmatically using `CustomElement.define`, inspect the definition object passed to it and ensure the `processContent` property holds a function value or is omitted if not needed.
* Review the signature of your hook function; while not directly causing *this* error, an incorrect signature might lead to runtime issues later. The hook typically receives the template node (`INode` or `Element`) and the `IPlatform`.