AUR0750

Error Message

AUR0750: view.ref is not supported. If you are migrating from v1, this can be understood as the controller.

Description

This error indicates that code is attempting to access the ref property on a View instance created by the rendering engine. This view.ref API existed in Aurelia v1 but has been removed in Aurelia v2.

Cause

The primary cause is code (often migrated from Aurelia v1 or based on v1 examples) that directly tries to use view.ref. In Aurelia v1, view.ref often provided a reference to the underlying host element or component instance associated with the view.

Solution

The direct replacement or equivalent functionality in Aurelia v2 depends on what view.ref was being used for in the original v1 code:

1. Accessing the Controller/View Model: If view.ref was used to get the component instance (view model), you should now typically access the controller associated with the view. The controller holds the component instance and provides methods for managing the component's lifecycle and state. How you get the controller depends on the context, but often it's available directly where the view is being manipulated (e.g., in template controllers like repeat, if, or custom attributes managing views).

2. Accessing the Host Element: If view.ref was used to get the host DOM element of the component associated with the view, you should access the controller.host property.

3. Using ref Attribute: For accessing specific DOM elements within a component's template, the standard approach in Aurelia v2 is to use the ref attribute in the template (e.g., <div ref="myDivElement">) and declare a corresponding property in the view model (myDivElement: HTMLDivElement;).

Review the v1 code that used view.ref and determine its purpose. Then, adapt the code to use the appropriate Aurelia v2 mechanism, most likely involving the controller associated with the view or the ref attribute for specific elements.

Example (Conceptual)

Aurelia v1 (Illustrative):

// In some custom attribute or logic dealing with views
let view = viewFactory.create();
// ... attach view ...
let componentInstance = view.ref; // Accessing the component instance ( Hypothetical v1 usage )
let hostElement = view.ref; // Accessing the host element ( Hypothetical v1 usage )

Aurelia v2 Equivalent:

// In some custom attribute or logic dealing with views
let view = viewFactory.create();
let controller = view.controller; // Get the controller associated with the view

// ... attach view ...

// Accessing the component instance (View Model)
let componentInstance = controller.viewModel;

// Accessing the host element
let hostElement = controller.host;

// If needing a specific element within the view's template:
// Template: <input ref="emailInput">
// VM: emailInput: HTMLInputElement;
// Access: componentInstance.emailInput

Debugging Tips

• Locate the code that triggers the error, specifically the access to .ref on a view object.

• Understand the original intent of using view.ref in the v1 context.

• Identify the controller associated with the view in your v2 code.

• Use controller.viewModel to access the component instance or controller.host to access the host element.

• Use the ref attribute in templates for accessing specific internal elements.