Vite 8 preamble error with transformWithOxc and bundledDev

[danielmarques-inx]

In our project we still have a lot of old js files with react components, so we use a transform plugin adapted from a working solution in vite 7:

const transformJsxInJs = (isProd: boolean): PluginOption => ({
  name: 'transform-jsx-in-js',
  enforce: 'pre',
  async transform(code, id) {
    if (!id.match(/.*\.js$/)) {
      return null
    }
    const result = await transformWithOxc(code, id, {
      lang: 'jsx',
      jsx: {
        runtime: 'automatic',
        development: !isProd,
      },
    })
    return result ? { code: result.code, map: result.map } : null
  },
})
...
const plugins = [react(), transformJsxInJs(mode === 'production'), dsv()]
....

Enabling bundledDev worked great for a few Vite 8 betas but now I get this preamble errors:
InformationCircleIcon.tsx:37 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

Using:
"@rollup/plugin-dsv": "3.0.5"
"@vitejs/plugin-react": "6.0.1"
"vite": "8.0.1"

Disabling bundledDev fixes the issue, but we have thousands of files and this was the feature I was most eager to test.

[manimovassagh]

The preamble error happens because @vitejs/plugin-react injects a JSX dev runtime preamble at the top of transformed files, and when bundledDev is enabled, the detection mechanism for that preamble breaks if another plugin transforms JSX before the React plugin gets to process it.

The issue is your transformJsxInJs plugin with enforce: 'pre' — it runs before @vitejs/plugin-react and transforms JSX using transformWithOxc with runtime: 'automatic' and development: true. This means by the time the React plugin sees the file, the JSX is already gone and it can't inject its preamble properly. With bundledDev enabled, the preamble detection is stricter because it expects to control the entire JSX transform pipeline.

Fix: let the React plugin handle JSX in .js files instead of doing it yourself.

@vitejs/plugin-react v6 supports configuring which files get JSX treatment. Use the include option:

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      include: /\.(jsx|tsx|js)$/,
      bundledDev: true,
    }),
    dsv(),
  ],
});

This tells the React plugin to also process .js files as JSX, removing the need for your custom transform plugin entirely. The React plugin will handle the preamble injection correctly because it controls the full pipeline.

If for some reason you need to keep the custom plugin, change the enforce to undefined (remove it) or 'post', and set development: false in the oxc transform options so it doesn't conflict with the React plugin's dev-mode preamble:

const transformJsxInJs = (): PluginOption => ({
  name: 'transform-jsx-in-js',
  async transform(code, id) {
    if (!id.match(/.*\.js$/)) return null;
    const result = await transformWithOxc(code, id, {
      lang: 'jsx',
      jsx: { runtime: 'classic' },  // avoid conflict with automatic runtime preamble
    });
    return result ? { code: result.code, map: result.map } : null;
  },
});

But the first approach (expanding include) is much cleaner.

[danielmarques-inx]

Already tried that include, same error:

  const plugins = [
    react({
      include: /\.(jsx|tsx|js)$/,
    }),
  ] 
  return {
    plugins,
    experimental: {
      // bundledDev: false,
    },

Pre-transform error: Transform failed with 1 error:

[PARSE_ERROR] Error: Unexpected JSX expression
     ╭─[ src/assets/theme/theme.js:192:21 ]
     │
 192 │         deleteIcon: <CloseIcon sx={{ width: 12, height: 12 }} />,
     │                     ──────────────────────┬─────────────────────  
     │                                           ╰─────────────────────── 
     │ 
     │ Help: JSX syntax is disabled and should be enabled via the parser options
─────╯

  Plugin: vite:oxc
  File: /workspaces/react-app/src/assets/theme/theme.js (x4)

[chandrika1993]

The root issue is the custom enforce: "pre" JSX transform running before @vitejs/plugin-react.

That means JSX is already transformed before React plugin handles dev runtime injection, which causes:

@vitejs/plugin-react can't detect preamble. Something is wrong.

And after adding .js to react({ include: ... }), the next failure still happens earlier in the pipeline:

Plugin: vite:oxc
Help: JSX syntax is disabled and should be enabled via the parser options

Recommended fix

Remove the custom transformWithOxc(..., { lang: "jsx" }) pre-transform and let Vite parse .js as JSX directly:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dsv from "@rollup/plugin-dsv";

export default defineConfig({
  esbuild: {
    loader: "jsx",
    include: /src\/.*\.js$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
    },
  },
  plugins: [
    react({
      include: /\.(js|jsx|ts|tsx)$/,
      bundledDev: true,
    }),
    dsv(),
  ],
});

Why this works

• react({ include: ... }) ensures React plugin handles .js
• esbuild.loader = "jsx" fixes source parsing before vite:oxc
• optimizeDeps.esbuildOptions.loader[".js"] = "jsx" keeps dependency optimization consistent

For Vite 8, I would avoid transformWithOxc as a pre-plugin unless there is a strong reason to keep it.

[danielmarques-inx]

Nothing was working, so I renamed all 400 js react files to jsx, removed the transformer and still getting the same error.
For now will keep the bundledDev disabled :(