Errors when running with Babel-based React Compiler

[jgarplind]

Describe what's incorrect/missing in the documentation

https://reactrouter.com/upgrading/router-provider#2-install-the-vite-plugin describes how to adopt the new React Router framework, coming from RouterProvider.

I started this migration, but ran into issues when I realized that the reactRouter plugin does not accept the same options as the react plugin, which stopped me in my tracks.

Specifically, I have the need to add babel plugins both for React compiler: https://react.dev/learn/react-compiler#usage-with-vite and Lingui: https://lingui.dev/tutorials/setup-vite.

In Discord, Kosire suggested I could patch the plugin: https://discord.com/channels/770287896669978684/1309472866453946368/1309472866453946368, which would probably work, but is not very accessible to the average user of the library, and would also be a significant maintenance burden over time, so it's not something I would like to do without being sure it is the only way.

Is this the state of things? Or is there a more appropriate way to handle this scenario, which could then be added to the documentation?

[timdorr]

Currently, it takes no options, so that would be the place to start. Unfortunately, it doesn't look like an easy task.

[jgarplind]

Thanks for weighing in! Yeah, that much is clear from looking at the source code. Whether it is an easy task or not is harder for me to tell.

I'm not sure why/if it would be difficult to accept the same arguments as the react-plugin (or at least the babel option). I wrote this issue hoping it was more or less forgotten, but of course it seems more likely that there are legitimate technical reasons.

[romulovalez]

I also need to pass the babel option in order to use styled-components, so I think is a must for a lot of users

[faradaytrs]

We also need babel options because we are using react compiler

[AlemTuzlak]

I'll shortly send a PR link on how to add this to your project

[AlemTuzlak]

forge-42/supabase-realtime#6
Here is a reference implementation that successfully adds it into a react router v7 framework mode project. also attached are the images of all the relevant changes

[jgarplind]

Thanks @AlemTuzlak, looks promising! I'll report back here once I've had the opportunity to test it, and confirmed that it covers my use cases, including Lingui.

[jgarplind]

Documenting as I go:

• Install vite-plugin-babel as per instructions above
• Install plugins as desired (see https://lingui.dev/releases/migration-5#standalone-babel-plugin-lingui-macro for Lingui)
• Reference them directly in your Vite config like so:

export default defineConfig({
  plugins: [
    babel({
      babelConfig: {
        plugins: ["@lingui/babel-plugin-lingui-macro"],
      },
    }),
    ...

This unblocks me and lets me continue my migration (which I don't have the time to finalize right now).

Unclear so far for me if I need to add @babel/preset-typescript.

I'll update this later as I find the time to finalize the migration, but this is very promising.

Hopefully we can add this to the documentation once we've validated it works widely.

[timdorr]

Note that having multiple plugins will instantiate multiple copies of Babel, transform your code multiple times, and result in both memory bloat and slower performance. That is why the official React plugin takes these options. We should do the same so builds remain as fast as possible.

[AlemTuzlak]

@timdorr I'm not sure that's the case? It runs a single transform with multiple plugins from what I saw while trying it out?

[timdorr]

The React Router plugin runs its own Babel instance and transforms, depending on the module type:

react-router/packages/react-router-dev/vite/plugin.ts

Lines 1444 to 1453 in 9819f96

	let ast = parse(code, { sourceType: "module" });
	if (!options?.ssr) {
	removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
	}
	WithProps.transform(ast);
	return generate(ast, {
	sourceMaps: true,
	filename: id,
	sourceFileName: filepath,
	});

react-router/packages/react-router-dev/vite/plugin.ts

Lines 1523 to 1534 in 9819f96

	let result = await babel.transformAsync(code, {
	babelrc: false,
	configFile: false,
	filename: id,
	sourceFileName: filepath,
	parserOpts: {
	sourceType: "module",
	allowAwaitOutsideFunction: true,
	},
	plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],
	sourceMaps: true,
	});

But this is also what the official React plugin does:

https://github.com/vitejs/vite-plugin-react/blob/2e368a65aaf8314142538c369c296e277fdfb69b/packages/plugin-react/src/index.ts#L232-L258

So, you're creating at least two instances of Babel. It would be far better for us to just take options directly so that transform step is done one time.

[GrahamQuan]

This would be useful for react compiler

[crispiestsquid]

Stumbled upon this while also hoping for a simple way to implement React Compiler.

Would love to see the reactRouter plugin take options. If there is anything I can do to help move that along please reach out.

Otherwise I will keep playing with the workaround while patiently wait for this