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.

   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.

   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.

   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.

   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.