[Compiler Bug]: Compiler break other babel plugins

[otomad]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://stackblitz.com/edit/vitejs-vite-qlmehlcy?file=dist%2Fassets%2Findex-DL_BpHJl.js

Repro steps

I've written a babel plugin, which is used to minify matrix string values in SVG when building.

const matrixAttrs = {
	feColorMatrix: ["values"],
	feConvolveMatrix: ["kernelMatrix"],
	feFuncR: ["tableValues"],
	feFuncG: ["tableValues"],
	feFuncB: ["tableValues"],
	feFuncA: ["tableValues"],
};

export default (_babel) => {
	return {
		name: "babel-plugin-minify-svg-matrix",
		visitor: {
			JSXElement(path) {
				const openingElement = path.node.openingElement;
				const tagName = openingElement.name.name;
				for (const [expectedTagName, expectedAttributes] of Object.entries(matrixAttrs)) {
					if (tagName !== expectedTagName) continue;
					for (const attribute of openingElement.attributes) {
						if ("name" in attribute && expectedAttributes.includes(attribute.name.name) && attribute.value?.type === "StringLiteral") {
							let value = attribute.value.value;
							value = value.trim().replaceAll(/\s+/g, " ");
							value = value.split(" ").map(n => n.replace(/^0+/, "").replace(/\.0*$/, "") || "0").join(" ");
							attribute.value.value = value;
						}
					}
				}
			},
		},
	};
};

This is the code of the example component.

export default function App() {
	return (
		<svg>
			<defs>
				<filter>
					<feColorMatrix
						type="matrix"
						values="
							0.33 0.33 0.33 0 0
							0.33 0.33 0.33 0 0
							0.33 0.33 0.33 0 0
							0 0 0 1 0
						"
						in="SourceGraphic"
						result="colorMatrix"
					/>
				</filter>
			</defs>
		</svg>
	);
}

When disable react compiler.

react({
	babel: {
		plugins: [
			// ["babel-plugin-react-compiler", { target: "19" }],
			minifySvgMatrix,
		],
	},
})

Build the project, and the bundled js minified the matrixes properly.

Then enable react compiler.

react({
	babel: {
		plugins: [
			["babel-plugin-react-compiler", { target: "19" }],
			minifySvgMatrix,
		],
	},
})

Build the project, and the minify SVG matrix babel plugin will not work.

Move react compiler after that plugin.

react({
	babel: {
		plugins: [
			minifySvgMatrix,
			["babel-plugin-react-compiler", { target: "19" }],
		],
	},
})

Same as above, still not work.

How often does this bug happen?

Every time

What version of React are you using?

19.1.0

What version of React Compiler are you using?

19.1.0-rc.2

[Subham-KRLX]

Hi! I'd like to investigate this issue. Could you confirm if the compiler plugin bypasses/overrides prior Babel transforms? Also, is this expected behaviour or something that should be patched?

[otomad]

Hi! I'd like to investigate this issue. Could you confirm if the compiler plugin bypasses/overrides prior Babel transforms? Also, is this expected behaviour or something that should be patched?

I did some preliminary breakpoint debugging and found that my own babel transformation plugin was still called and executed properly, so I speculated that it was possible that react compiler replaced the transformed value back to the original value.

Since this is the first time I write a babel plugin myself, if this problem caused by the plugin I wrote incorrectly, please tell me the correct way. But no matter what, at least the plugin can work properly before enabling react compiler, and abnormally after enabling react compiler.

[Subham-KRLX]

@otomad,
Thanks for confirming that my plugin runs initially but gets overridden by the React Compiler. I’ll debug deeper:
Log the plugin execution order to ensure mine runs first.
Dump the AST after React Compiler to confirm attribute reversion.
Meanwhile, could you clarify whether React Compiler is expected to preserve custom Babel transformations on JSX attributes, or if this reversion is an unintended side effect? Happy to provide a minimal repro or patch if needed.

[josephsavona]

Babel is unfortunately very buggy and unreliable, and one of its quirks is that plugin ordering isn’t predictable. What I suspect is happening here is that Babel is trying to run both plugins in parallel. But the way React Compiler works is to take the entire program node and rewrite it - trying to basically avoid Babel as much as possible. My instinct is that somehow your plugin is also running and changing nodes “inside”, but then those updated nodes are discarded when RC rewrites the program itself.

You might try adding a no-op visitor function for Program to see if that forces Babel to serialize the plugin execution.

We’ll see what we can do to force Babel to serialize things.

[josephsavona]

@Subham-KRLX blocking as you’re obviously AI