Pre-transform error: Unexpected JSX expression -> JSX syntax is disabled and should be enabled via the parser options

[oles]

Hey! I'm experimenting with switching from Rspack to Vite for our web app, using the beta of Vite 8 and @vitejs/plugin-react

(vite@8.0.0-beta.10, @vitejs/plugin-react@5.1.2)

Our current decently large code base uses JSX without the .jsx extension, just .js (for now).

I'll likely push and migrate us to .jsx files in due time, but until then, I'm getting this error:

4:56:29 PM [vite] (client) Pre-transform error: Unexpected JSX expression
  Plugin: vite:oxc
  File: /home/user/projects/web-app/src/app/path-redirect.js:27:11
  25 |      }
  26 |  
  27 |      return <Navigate to={to} replace />
     |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  28 |  }
  29 |  
  JSX syntax is disabled and should be enabled via the parser options

Which makes it seem that Vite and/or Rolldown and/or oxc supports using JSX in plain .js files, but I cannot find out how to set those parser options.

I've tried setting this in my vite config:

...
        build: {
            rolldownOptions: {
                moduleTypes: {
                    '.js': 'jsx'
                }
            }
        },
...

But that didn't do anything.

I've looked at https://main.vite.dev/config, https://rolldown.rs/reference, https://oxc.rs/docs/guide/usage/transformer/jsx.html, but I'm not really finding anything I feel matches the error and/or suggestion well 🤔

[oles]

Related discussion: vitejs#323

[oles]

Finally I was able to get it to work:

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()
    ],
  };
});