ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

[doug-wade]

Expected

I expect for super() calls and this accesses to be the same in the compiled code as in the source code

Actual

My super() calls come after my accesses to this in version 0.19.10, but not earlier.

Details

I'm doing the migration from 0.19.9 -> 0.19.10, and I think there may have been a regression in the behavior of super() that may have been introduced by #3538. In particular, I have this constructor that starts with a call to super(). In 0.19.9, this block is being compiled as follows:

    constructor() {
      super();
      // A hash from the attribute name to its corresponding reactive and parser
      this.#props = {};
      // A hash from the render state key to its corresponding reactive (returned from the setup method)
      this.#renderState = /* @__PURE__ */ new Map();
      // The render method from the component definition
      this.#render = passedRender;
      // The css string or function from the component definition
      this.#css = css;
      // The template string from the component definition
      this.#template = template;
      // Whether or not the component is currently connected to the dom
      this.#isConnected = false;
      // All of the contexts to connect to
      // https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
      this.#contexts = /* @__PURE__ */ new Map();

but in 0.19.10, I am getting the super call after the accesses to this:

    constructor() {
      // A hash from the attribute name to its corresponding reactive and parser
      this.#props = {};
      // A hash from the render state key to its corresponding reactive (returned from the setup method)
      this.#renderState = /* @__PURE__ */ new Map();
      // The render method from the component definition
      this.#render = passedRender;
      // The css string or function from the component definition
      this.#css = css;
      // The template string from the component definition
      this.#template = template;
      // Whether or not the component is currently connected to the dom
      this.#isConnected = false;
      // All of the contexts to connect to
      // https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
      this.#contexts = /* @__PURE__ */ new Map();
      super();

[evanw]

It looks like this is happening when TypeScript's useDefineForClassFields setting is false and all class fields lack initializers. In this case the trigger is the contextState: any; class field declaration. Changing that to contextState: any = undefined; no longer triggers the bug.

[doug-wade]

Thanks @evanw! That worked like a charm -- thanks for the quick and effective response.