{"record":{"id":"d9a9ff723bcfd1c8","repo":"emberjs/ember.js","slug":"you-must-pass-both-the-owner-and-args-to-super-i","errorCode":null,"errorMessage":"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.","messagePattern":"You must pass both the owner and args to super\\(\\) in your component: (.+?)\\. You can pass them directly, or use \\.\\.\\.arguments to pass all arguments through\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@glimmer/component/src/-private/component.ts","lineNumber":237,"sourceCode":" * We know that `name` is a property on the component. If we want to know where\n * the data is coming from, we can go look at our component class to find out.\n *\n * Inside the component itself, arguments always show up inside the component's\n * `args` property. For example, if `{{@firstName}}` is `Tom` in the template,\n * inside the component `this.args.firstName` would also be `Tom`.\n */\nexport default class GlimmerComponent<S = unknown> {\n  /**\n   * Constructs a new component and assigns itself the passed properties. You\n   * should not construct new components yourself. Instead, Glimmer will\n   * instantiate new components automatically as it renders.\n   *\n   * @param owner\n   * @param args\n   */\n  constructor(owner: unknown, args: Args<S>) {\n    if (DEBUG && !(owner !== null && typeof owner === 'object' && ARGS_SET.has(args))) {\n      throw new Error(\n        `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.`\n      );\n    }\n\n    this.args = args;\n\n    DESTROYING.set(this, false);\n    DESTROYED.set(this, false);\n  }\n\n  /**\n   * Named arguments passed to the component from its parent component.\n   * They can be accessed in JavaScript via `this.args.argumentName` and in the template via `@argumentName`.\n   *\n   * Say you have the following component, which will have two `args`, `firstName` and `lastName`:\n   *\n   * ```hbs\n   * <my-component @firstName=\"Arthur\" @lastName=\"Dent\" />","sourceCodeStart":219,"sourceCodeEnd":255,"githubUrl":"https://github.com/emberjs/ember.js/blob/26f97246a8bf2e28edf26ac3093da2e86c04ffc5/packages/@glimmer/component/src/-private/component.ts#L219-L255","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Change the subclass constructor to accept (owner, args) and call super(owner, args)","Or simply call super(...arguments) to pass everything through","Or delete the constructor entirely if no setup is needed — the base class wires owner/args automatically","Verify the component is instantiated through the Glimmer rendering pipeline, which supplies owner and args"],"exampleFix":"// before\nexport default class MyComponent extends Component {\n  constructor() {\n    super();\n    this.setup();\n  }\n}\n// after\nexport default class MyComponent extends Component {\n  constructor(owner, args) {\n    super(owner, args);\n    this.setup();\n  }\n}","handlingStrategy":"validation","validationCode":"function canConstructComponent(Ctor, owner, args) {\n  return owner !== null && typeof owner === 'object' && args !== null && typeof args === 'object';\n}","typeGuard":"function hasOwnerAndArgs(owner, args): owner is object & args is object {\n  return owner !== null && typeof owner === 'object' && args !== undefined;\n}","tryCatchPattern":"try {\n  new MyComponent(owner, args);\n} catch (e) {\n  if (String(e.message).includes('You must pass both the owner and args')) {\n    console.error('Component constructed without owner/args — fix super() call');\n  } else { throw e; }\n}","preventionTips":["Always call super(...arguments) or super(owner, args) in Glimmer component constructors","Prefer omitting the constructor entirely when no custom setup is needed","Add a lint rule/CI check for empty super() calls in component subclasses"],"tags":["glimmer","ember","constructor","owner","args","debug"],"backgroundTag":"missing-super-arguments","analyzedSha":"26f97246a8bf2e28edf26ac3093da2e86c04ffc5","analyzedAt":"2026-09-01T05:01:28.182Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}