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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0766.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.