JSX transform import bug in production

[keller-mark]

Describe the bug

When testing out hubmapconsortium/portal-ui#2991 it seems that the production bundle works until clicking the three-dot icon in the cell set manager, when Vitessce crashes with the following error.

The error does not occur when the dependency and import statements are switched from vitessce (the production bundle) to @vitessce/dev (the development bundle).

It seems related to the JSX transform in Vite production vs development modes:

• Setting build mode to "development" breaks React JSX transform vitejs/vite#5885
• Vite not importing jsx runtime correctly in development build vitejs/vite#8888
• fix(plugin-react): jsxDev is not a function when is set NODE_ENV in env files vitejs/vite#10861

To Reproduce
Steps to reproduce the behavior:

• check out Bump vitessce version hubmapconsortium/portal-ui#2991
• run bash ./etc/dev/dev-start.sh
• open http://localhost:5001/browse/dataset/9458b342e7a9bad77887b60ca42b6a26
• make a selection in the scatterplot
• try to click the three-dot menu to view the options for the new selection

Uncaught TypeError: Rs.exports.jsxDEV is not a function

In contrast, when using @vitessce/dev v2.0.1, we see the expected behavior:

Simpler reproducer

https://observablehq.com/@keller-mark/vitessce-from-unpkg change vitessce to @vitessce/dev in the require statement

Environment:

• Release or git hash: 2.0.1
• Browser: firefox