Enabling React Compiler breaks JSX pragma handling

[swandir]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-rsc

Describe the bug

React Compiler integration, as documented by the plugin, is not compatible with JSX pragma usage (e.g Emotion css prop).

React Compiler adds an import statement at the top of the file (playground).

This causes Oxc to skip the pragma (playground).

Interestingly, Babel handles this case fine (playground), while TypeScript matches Oxc's behavior (playground).

Reproduction

https://stackblitz.com/edit/vitejs-vite-9eantx6h

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 22.22.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^6.0.1 => 6.0.1 
    vite: ^8.0.12 => 8.0.12

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[swandir]

A straightforward fix would be to relax Oxc's behavior to match Babel.

On the other hand, Oxc's current behavior is defensible as it matches TypeScript's.

However, TypeScript is mainly used as a standalone tool, while Oxc is integrated as an intermediate transform. So it might make more sense for it to match Babel's behavior.

[sapphi-red]

SWC also has the same behavior (playground).

I personally think this should be fixed on the react compiler side as it supports JSX and think it should keep the JSX semantics.

[ArnaudBarre]

What does it behave in next? It probably doesn't work since it's using swc no?

[swandir]

SWC also has the same behavior (playground).

I personally think this should be fixed on the react compiler side as it supports JSX and think it should keep the JSX semantics.

Yeah, you are probably right.

Reported here: facebook/react#36460

Meanwhile, it might be worth noting this gotcha in the React plugin docs, or maybe apply or suggest a workaround, what do you think?

I was able to get it to work with this:

import MagicString from "magic-string";
import type { Plugin } from "vite";

export const jsxPragma = (): Plugin => {
  return {
    name: "jsx-pragma",
    enforce: "pre",
    transform: {
      filter: {
        code: ["@jsxRuntime", "@jsxImportSource"],
      },
      handler: (code, id) => {
        const s = new MagicString(code);

        const jsxRuntime = code.match(/@jsxRuntime\s+(\S+)/)?.[1];
        const jsxImportSource = code.match(/@jsxImportSource\s(\S+)/)?.[1];

        if (jsxRuntime) {
          s.prepend(`/* @jsxRuntime ${jsxRuntime} */\n`);
        }

        if (jsxImportSource) {
          s.prepend(`/* @jsxImportSource ${jsxImportSource} */\n`);
        }

        return {
          code: s.toString(),
          map: s.generateMap({ hires: true, source: id }),
        };
      },
    },
  };
};

And it seems to be faster that enabling the Babel's JSX transform.

Edit: Of course, it does not handle edge cases with these directives appearing somewhere other than valid pragma comments. So as a general solution using the Babel's transform may be better.

[swandir]

What does it behave in next? It probably doesn't work since it's using swc no?

It does appear to work in Next.js, even if the pragma is not at the top of the source file.

[swandir]

After digging into how Next.js handles this, I noticed that, despite what the playground shows, babel-plugin-react-compiler adds a line break after the import declaration.

And with the line break SWC respects the pragma (playground links do not preserve the line break for some reason, so no link here). So, swapping plugin-react for plugin-react-swc also works.

Oxc and TypeScript still don't.

[ArnaudBarre]

You can avoid handling source map by adding comment in the first line without line breaks

      handler: (code, id) => {
        const jsxRuntime = code.match(/@jsxRuntime\s+(\S+)/)?.[1];
        const jsxImportSource = code.match(/@jsxImportSource\s(\S+)/)?.[1];

        if (jsxRuntime) {
          code = `/* @jsxRuntime ${jsxRuntime} */ ` + code;
        }

        if (jsxImportSource) {
          code = `/* @jsxImportSource ${jsxImportSource} */ ` + code;
        }

        return { code, map: null }
      },

Oxc only searches for pragma inside comment before the first statement for performance reason: oxc-project/oxc#20675

Maybe this could be reverted, as plugin injecting new import at the top without parsing could happen in other context (The react plugins used to do that until this PR)

Given that imports are hoisted by default and that the react compiler is using babel to generate code, it's pretty easy for them inject the import later in the file, so we could ask plugin authors to add extra code at the bottom of files instead, which is better for source map.