AUR9997

Error Message

AUR9997: Marker is malformed. This likely happens when a compiled template has been modified. Did you accidentally modified some compiled template? You can modify template before compilation with compiling Template compiler hook.

Description

This error indicates that Aurelia's rendering engine encountered an internal marker in the DOM that has an unexpected or corrupted format. Aurelia uses special HTML comments (e.g., <!--au*-->, <!--au-start-->, <!--au-end-->) as markers within the rendered DOM to pinpoint locations for dynamic content, custom elements, and template controllers. This error suggests one of these markers is missing, misplaced, or structurally incorrect.

Cause

This is an internal error that typically points to unexpected modifications of the DOM after Aurelia has compiled the template and initially rendered it. Potential causes include:

1. Direct DOM Manipulation: External JavaScript code (not managed by Aurelia) or third-party libraries directly modifying the DOM structure in a way that breaks or removes Aurelia's markers (HTML comments).

2. Server-Side Rendering (SSR) Mismatch: In an SSR context, if the DOM structure hydrated on the client-side does not exactly match the server-rendered HTML (including the comment markers), this error could potentially occur during hydration.

3. Browser Extensions: Some browser extensions aggressively modify page content and could potentially interfere with Aurelia's markers.

4. Internal Error (Less Likely): An unlikely bug within Aurelia's rendering or hydration logic itself.

Solution

1. Avoid Direct DOM Manipulation: The most common cause is interference with Aurelia's DOM. Ensure that any custom scripts, jQuery plugins, or other libraries interacting with the DOM do not modify the areas managed by Aurelia components, especially removing comment nodes. Use Aurelia's APIs and binding system to manage dynamic content.

2. Verify SSR Hydration: If using SSR, ensure the server-rendered output and the client-side component template are consistent. Check the hydration process for errors.

3. Test with Extensions Disabled: Temporarily disable browser extensions to rule out their interference.

4. Review processContent Hooks: If using the @processContent hook (an advanced feature), ensure it doesn't inadvertently modify the DOM structure in a way that breaks markers. Modifications should generally happen before compilation.

5. Report Issue: If the error occurs without any obvious external DOM manipulation, consider reporting it as a potential bug with a clear reproduction scenario.

Example

This error isn't caused by specific template syntax but by runtime modification.

<!-- Compiled template might look something like this internally -->
<div>
  <!--au*--><!--au-start--> ${message} <!--au-end--><!--au*-->
</div>

If external code were to remove one of the <!--au...--> comments, or change its content, error AUR9997 might occur when Aurelia tries to update the binding for message.

Debugging Tips

• Inspect the DOM using browser developer tools around the area where the error seems to originate. Look for the HTML comment markers (<!--au...-->). Check if they are present and appear structurally sound.

• Review any non-Aurelia JavaScript code that runs on the page and might interact with the DOM. Temporarily disable such code to see if the error disappears.

• If using SSR, compare the server-rendered HTML source with the DOM structure on the client after hydration, paying close attention to comment nodes.

• Simplify the component where the error occurs to its bare minimum to see if the issue persists.