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

The re-exported Component wrapper in @glimmer/component validates that the owner passed through super() is a non-null object (DEBUG only). Even though TypeScript types the owner, a null/undefined owner slips through at runtime when a component is constructed outside the rendering system.

Source

Thrown at packages/@glimmer/component/src/index.ts:423

  ## `isDestroying`

  A boolean flag to tell if the component is in the process of destroying. This is set to
  true before `willDestroy` is called.

  ## `isDestroyed`
  A boolean to tell if the component has been fully destroyed. This is set to true
  after `willDestroy` is called.

  @module @glimmer/component
  @public
*/
export default class Component<S = unknown> extends _GlimmerComponent<S> {
  constructor(owner: Owner, args: Args<S>) {
    super(owner, args);

    if (DEBUG && !(owner !== null && typeof owner === 'object')) {
      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.`
      );
    }

    setOwner(this, owner);
  }
}

setComponentManager((owner: Owner) => {
  return new GlimmerComponentManager(owner);
}, Component);

View on GitHub (pinned to 26f97246a8)

Solutions

1. Render the component through the normal template/invocation path so the framework supplies the owner
2. If constructing in tests, use a render helper (e.g. renderElectronic or the test harness) rather than `new`
3. Ensure super() receives the owner as the first argument
4. Confirm setOwner/application bootstrapping is complete before component creation

Example fix

// before
let comp = new MyComponent(null, {});
// after
await render(hbs`<MyComponent />`);

if (owner === null || typeof owner !== 'object') {
  throw new Error('Owner required: render the component through the framework instead of constructing it directly');
}

function isOwner(o) { return o !== null && typeof o === 'object' && typeof o.lookup === 'function'; }

try {
  new MyComponent(owner, args);
} catch (e) {
  if (String(e.message).includes('owner and args')) {
    // fall back to rendering through the test harness
  } else { throw e; }
}

When it happens

Trigger: Manually instantiating a component class with `new MyComponent()` or `new MyComponent(null, {})` outside the app renderer; tests constructing components directly; calling super() with a dropped owner argument.

Common situations: Unit tests instantiating components directly instead of rendering them; misuse in addon code creating components imperatively; migration where the owner lookup was removed.

Related errors

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

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