JSX in TypeScript namespace causes error about vite-plugin-react HOT 2 CLOSED

For automatic runtime, Vite uses babel to transform JSX and esbuild to transform TS.

// input
namespace AAA {
  export const Hello = () => <div>Hello</div>
}

// output from babel
namespace AAA {
  export const Hello = () => /*#__PURE__*/_jsxDEV("div", {
    children: "Hello"
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 5,
    columnNumber: 30
  }, this);
  _c = Hello;
}

This output uses this in namespace and esbuild throws an error for that. Vite needs to inject a custom babel plugin to babel to transform this this to void 0. vitejs/vite#9590 might fix this indirectly.

For classic runtime, Vite uses babel to add debug information and esbuild to transform JSX+TS.

// input
namespace AAA {
  export const Hello = () => <div>Hello</div>
}

// output from babel
namespace AAA {
  export const Hello = () => <div __self={this} __source={{
    fileName: _jsxFileName,
    lineNumber: 5,
    columnNumber: 30
  }}>Hello</div>;
  _c = Hello;
}

We need to use a similar babel plugin for this case too.

from vite-plugin-react.

Closing as I confirmed plugin-react 3.0.0 works with this. plugin-react now uses esbuild to transform JSX and I think that fixed this.

from vite-plugin-react.