emberjs/ember.js · error · Error

You must pass both the owner and args to super() in your com

Error message

You must pass both the owner and args to super() in your component: ${this.constructor.name}. You can pass them directly, or use ...arguments to pass all arguments through.

What it means

Glimmer components require two constructor arguments: the owner and the args object. This DEBUG-mode guard in the base class constructor throws when a subclass calls super() without both a valid (non-null, object) owner and a recognized args object (tracked via ARGS_SET). It exists to catch components that forgot to pass arguments through super() entirely.

Source

Thrown at packages/@glimmer/component/src/-private/component.ts:237

 * We know that `name` is a property on the component. If we want to know where
 * the data is coming from, we can go look at our component class to find out.
 *
 * Inside the component itself, arguments always show up inside the component's
 * `args` property. For example, if `{{@firstName}}` is `Tom` in the template,
 * inside the component `this.args.firstName` would also be `Tom`.
 */
export default class GlimmerComponent<S = unknown> {
  /**
   * Constructs a new component and assigns itself the passed properties. You
   * should not construct new components yourself. Instead, Glimmer will
   * instantiate new components automatically as it renders.
   *
   * @param owner
   * @param args
   */
  constructor(owner: unknown, args: Args<S>) {
    if (DEBUG && !(owner !== null && typeof owner === 'object' && ARGS_SET.has(args))) {
      throw new Error(
        `You must pass both the owner and args to super() in your component: ${this.constructor.name}. You can pass them directly, or use ...arguments to pass all arguments through.`
      );
    }

    this.args = args;

    DESTROYING.set(this, false);
    DESTROYED.set(this, false);
  }

  /**
   * Named arguments passed to the component from its parent component.
   * They can be accessed in JavaScript via `this.args.argumentName` and in the template via `@argumentName`.
   *
   * Say you have the following component, which will have two `args`, `firstName` and `lastName`:
   *
   * ```hbs
   * <my-component @firstName="Arthur" @lastName="Dent" />

View on GitHub (pinned to 26f97246a8)

Solutions

  1. Change the subclass constructor to accept (owner, args) and call super(owner, args)
  2. Or simply call super(...arguments) to pass everything through
  3. Or delete the constructor entirely if no setup is needed — the base class wires owner/args automatically
  4. Verify the component is instantiated through the Glimmer rendering pipeline, which supplies owner and args

Example fix

// before
export default class MyComponent extends Component {
  constructor() {
    super();
    this.setup();
  }
}
// after
export default class MyComponent extends Component {
  constructor(owner, args) {
    super(owner, args);
    this.setup();
  }
}
Defensive patterns

Strategy: validation

Validate before calling

function canConstructComponent(Ctor, owner, args) {
  return owner !== null && typeof owner === 'object' && args !== null && typeof args === 'object';
}

Type guard

function hasOwnerAndArgs(owner, args): owner is object & args is object {
  return owner !== null && typeof owner === 'object' && args !== undefined;
}

Try / catch

try {
  new MyComponent(owner, args);
} catch (e) {
  if (String(e.message).includes('You must pass both the owner and args')) {
    console.error('Component constructed without owner/args — fix super() call');
  } else { throw e; }
}

Prevention

When it happens

Trigger: A subclass defines `constructor()` and calls `super()` with no arguments, or `super(props)` passing only one value, or passes a non-object owner (null/undefined) in development builds.

Common situations: Upgrading from classic Ember components (@ember/component) to @glimmer/component and keeping the old no-arg constructor; hand-written constructors that drop `...arguments`; TypeScript subclasses overriding the constructor signature and dropping parameters.

Related errors

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