Allow using JSX before calling super when using --jsx-dev

[skovhus]

esbuild does not support using JSX inside a constructor before calling super when using the --jsx-dev flag . This seems like a bug. Note that Babel supports this.

When --jsx-dev the compiled version includes this as the last argument of the JSX function, which is problematic if you have some JSX defined inside a class constructor before calling super because you cannot access this before that point.

  // Compiled code from the reproduction link
class ChildComponent extends ParentComponent {
  constructor() {
    super(/* @__PURE__ */ jsxDEV("div", { children: "Content" }, void 0, false, {
      fileName: "<stdin>",
      lineNumber: 22,
      columnNumber: 11
    }, this));
  }
}

Reproduction

• esbuild.github.io/try using --loader=jsx (works as expected)
• esbuild.github.io/try using --jsx-dev (fails)

Related

vitejs/vite-plugin-react#231
babel/babel#14271

[skovhus]

@evanw is this something you would want esbuild to support? I might be able to help implementing this if I get a few pointers.

[evanw]

FWIW TypeScript doesn't seem to handle this case either. It's too bad that there doesn't seem to be a specification for the new React JSX transform, or at least not one that adequately describes it. I can only find this which links to this which doesn't describe what __self is at all. Given how loose Babel is with this (just omit it within the entire constructor), I'm taking it that the value of __self doesn't really matter that much. It sounds like maybe the React team was using this for a migration warning at some point in the past, but now the value is perhaps irrelevant? I can have esbuild do what Babel does to fix this case. Hopefully I'm not breaking anything since I don't understand how it's supposed to be used.

[skovhus]

Thanks for fixing this and adding the detailed explanation and changelog entry!

Frustrating that there isn’t a specification for this.