Getting .js files containing React JSX to work

[amcsi]

Based on this StackOverflow answer (that's based off of this Vite discussion comment), I've been using what's in the answer until now to get plain .js files containing JSX to work. This is for an old project that started off from CRA where at the time it was considered best practice to not name your JS files containing as JSX as .jsx, but rather keep them as .js, the logic being that there are several layers of transpilation happening anyway (minifying, babel plugins, typescript etc.) so you shouldn't try to express all the layers in the extension.

Anyway, so now with rolldown-vite since it's not using ESBuild anymore, I'm assuming this part of the vite config won't work anymore:

    optimizeDeps: {
      esbuildOptions: {
        loader: {
          ".js": "tsx",
        },
      },
    },

So would anyone please help me find the equivalent for rolldown-vite?

[oles]

Related discussion: vitejs#21505

[oles]

I found a solution!

vitejs#21505 (comment)

import { defineConfig, loadEnv, transformWithOxc } from "vite";
import react from "@vitejs/plugin-react";

const transformJsxInJs = () => ({
  name: "transform-jsx-in-js",
  enforce: "pre",
  async transform(code, id) {
    if (!id.match(/.*\.js$/)) {
      return null;
    }

    return await transformWithOxc(code, id, {
      lang: "jsx",
    });
  },
});

export default defineConfig(() => {
  return {
    resolve: {
      tsconfigPaths: true,
    },

    plugins: [
      react(),
      transformJsxInJs()
    ],
  };
});

This hack/plugin might break other stuff down the line (HMR, tree shaking, bundling, who knows), but it's at least able to get me to start experimenting with Vite before converting our large codebase to actual .jsx files.