AUR0116

Error Message

AUR0116: Ast eval error: cannot assign value to property "<property>" of null/undefined.

Where <property> is the name or key of the property being assigned to.

Description

This error occurs during the evaluation of a binding expression when an attempt is made to assign a value to a property (using dot notation like obj.prop = value or bracket notation like obj[key] = value), but the base object (obj in the examples) is currently null or undefined. JavaScript prevents assigning properties to null or undefined.

Cause

The most common reasons for this error are:

1. Object Not Initialized: The object whose property you are trying to set has not been initialized or has been explicitly set to null or undefined.

2. Asynchronous Initialization: The object is intended to be initialized by an asynchronous operation (e.g., fetching data), but the assignment attempt happens before the operation completes and the object is assigned.

3. Incorrect Property Access Path: The expression leading to the object might be incorrect, resulting in null or undefined being evaluated before the final property assignment (e.g., data.user.name = 'Test' when data.user is null).

4. Conditional Logic: The object might exist under certain conditions but be null or undefined under others, and the assignment occurs when it doesn't exist.

Solution

1. Ensure Initialization: Initialize the object before attempting to assign properties to it. This can be done in the view model's constructor, appropriate lifecycle hooks (binding, bound, attaching), or using default values.

2. Conditional Assignment: Use conditional logic (if.bind in the template or if statements in the view model) to ensure the assignment only happens when the object is not null or undefined.

3. Default Values: Provide default objects in the path if parts might be nullish, for example data.user = data.user || {}; data.user.name = 'Test';. Be cautious with this approach as it might hide underlying issues.

4. Await Asynchronous Operations: If the object is initialized asynchronously, ensure that any logic attempting property assignments waits for the initialization to complete (e.g., using async/await or Promise chaining).

Example

<!-- Assume 'userProfile' might be null initially -->
<input value.bind="userProfile.email"> <!-- Incorrect: May throw AUR0116 if userProfile is null -->

<!-- Assume 'updateSettings' tries to set 'config.theme' -->
<button click.trigger="updateSettings('dark')">Set Theme</button> <!-- Incorrect: May throw if 'config' is null -->

<!-- Correct: Ensure object exists before binding -->
<template if.bind="userProfile">
  <input value.bind="userProfile.email">
</template>

<!-- Correct: Initialize object in view model before binding -->

// View Model Example
import { customElement } from 'aurelia';

interface UserProfile {
  email: string;
  name: string;
}

interface AppConfig {
  theme: string;
  notifications: boolean;
}

@customElement({ /* ... */ })
export class MyComponent {
  // Initialized to null - assignments will fail until it's an object
  userProfile: UserProfile | null = null;
  config: AppConfig | null = null;

  constructor() {
    // Simulate loading
    setTimeout(() => {
      this.userProfile = { email: '[email protected]', name: 'Test User' };
      // Forgetting to initialize config would cause errors if updateSettings is called
      // this.config = { theme: 'light', notifications: true };
    }, 1000);
  }

  // Corrected approach: Ensure config exists before assignment
  updateSettings(newTheme: string) {
    if (this.config === null) {
      this.config = { theme: 'light', notifications: true }; // Initialize if null
    }
    this.config.theme = newTheme; // Now safe to assign
  }

  // Alternative: Initialize properties in the constructor or directly
  // userProfile: UserProfile = { email: '', name: '' };
  // config: AppConfig = { theme: 'light', notifications: true };
}

Debugging Tips

• Use console.log or breakpoints to inspect the value of the object immediately before the property assignment that causes the error.

• Trace back the code execution to find where the object should have been initialized or why it became null or undefined.

• Check asynchronous operations (API calls, timeouts) that might be responsible for initializing the object and ensure they complete before assignments occur.

• Verify the full property access path (e.g., a.b.c) - ensure that intermediate objects (a and a.b) are also not null or undefined if you are assigning to c. Consider optional chaining (a.b?.c = value) if appropriate, though this prevents the assignment if a.b is nullish, which might not be the desired outcome. Direct assignment as in the error requires the path to exist.