Using JSX inside a constructor before calling super will crash at runtime

[pauldijou]

Describe the bug

After upgrading from 2.2.0 to 4.1.0, we noticed that some of our components would crash at runtime. This seems to be due to vitejs/vite@f677b62 that changed the way to compile JSX. The new compiled version includes this as the last argument of the JSX function, which was not the case previously.

This 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
  super(/* @__PURE__ */ jsxDEV("div", { children: "Content" }, void 0, false, {
    fileName: "/home/projects/vitejs-vite-t1y2x7/src/App.jsx",
    lineNumber: 19,
    columnNumber: 11
  }, this));

Reproduction

https://stackblitz.com/edit/vitejs-vite-t1y2x7?file=src%2FApp.jsx

Steps to reproduce

• Create a class component that uses JSX before calling super
• Render the component
• See the error in the console: ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

System Info

-

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ArnaudBarre]

I investigated a bit and found that a edge case that Babel support but not esbuild and SWC.

if you want this edge case to be supported you need to ask it to the lib that do the transformation.

My opinion is that this edge case is quite an anti-pattern of React (FB never needed this) and I think this fine for Vite to continue to default to esbuild for this transformation, given that it allows a nice build time boost when not using custom babel plugins.

[pauldijou]

Thanks for looking into it @ArnaudBarre .

[skovhus]

Note that I created an issue for esbuild to consider fixing this – failing only during development seems like a bug to me (anti-pattern or not): evanw/esbuild#3454