emberjs/ember.js · error · Error

You accessed `this${access}` from a function passed to the $

Error message

You accessed `this${access}` from a function passed to the ${source}, but the function itself was not bound to a valid `this` context. Consider updating to use a bound function (for instance, use an arrow function, `() => {}`).

What it means

untouchable-this creates a Proxy used as the `this` context for unbound functions passed to certain APIs (e.g. computed-like callbacks). Any property access, set, or `has` check on that proxy throws this error, telling the developer their function isn't bound to a real object and probably relies on implicit `this` (a classic function syntax pitfall).

Source

Thrown at packages/@glimmer/debug-util/lib/untouchable-this.ts:12

import { DEBUG } from '@glimmer/env';
/* eslint-disable @typescript-eslint/no-empty-object-type */
export default function buildUntouchableThis(source: string): null | object {
  let context: null | object = null;
  if (DEBUG) {
    let assertOnProperty = (property: string | number | symbol) => {
      let access =
        typeof property === 'symbol' || typeof property === 'number'
          ? `[${String(property)}]`
          : `.${property}`;

      throw new Error(
        `You accessed \`this${access}\` from a function passed to the ${source}, but the function itself was not bound to a valid \`this\` context. Consider updating to use a bound function (for instance, use an arrow function, \`() => {}\`).`
      );
    };

    context = new Proxy(
      {},
      {
        get(_target: {}, property: string | symbol) {
          assertOnProperty(property);
        },

        set(_target: {}, property: string | symbol) {
          assertOnProperty(property);

          return false;
        },

        has(_target: {}, property: string | symbol) {

View on GitHub (pinned to 26f97246a8)

Solutions

1. Convert the callback to an arrow function and reference captured variables instead of `this`
2. Bind the function explicitly to the intended context if `this` is genuinely required
3. Rewrite the logic to take dependencies as parameters rather than instance state
4. Search the callback for `this.` usages and eliminate them

Example fix

// before
someApi(function () {
  return this.value;
});
// after
someApi(() => {
  return externalValue;
});

function usesThis(fn) { return /\bthis\b/.test(Function.prototype.toString.call(fn)) && !/^(?:\(|function\s*\([^)]*\)\s*=>)/.test(Function.prototype.toString.call(fn).trim()); }

try {
  someApi(callback);
} catch (e) {
  if (String(e.message).includes('not bound to a valid `this` context')) {
    console.error('Convert the callback to an arrow function and avoid `this`');
  } else { throw e; }
}

When it happens

Trigger: Passing a non-arrow `function () { return this.someProp; }` to an API wrapped by untouchable-this, then the function reads/writes `this.x` or checks `in this` — the proxy's get/set/has traps fire assertOnProperty.

Common situations: Refactoring from Ember object model where `this` was the component; using plain functions where arrow functions are expected; copy-pasted legacy helper code that mutates `this`.

Related errors

• Compile Error: ${template.problem} @ ${template.span.start}.
• A resolved helper cannot be passed as a named argument as th
• deprecation override for ${id} not found
• You must pass both the owner and args to super() in your com
• You must pass both the owner and args to super() in your com

AI-assisted analysis of emberjs/ember.js@26f97246a8 (2026-09-01). Data as JSON: /api/errors/1d359ff428abee5e. Report an issue: GitHub.