Vite plugin does not accept options

[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

[sindras]

Thanks for starting this thread. I also noticed that when I'm migrating from Remix to RRv7, there is no option to pass presets, which makes it difficult to implement PWA using @vite-pwa/remix.

[kazem3d]

Thanks for starting this thread. I also noticed that when I'm migrating from Remix to RRv7, there is no option to pass presets, which makes it difficult to implement PWA using @vite-pwa/remix.

I also have this problem,How to have a pwa application in RRv7 ?

[marcebdev]

Same, this is a big blocker. I was pretty interested in how RR7 is using a plugin to handle type safety, etc. but now seeing that it replaces the base @vitejs/plugin-react and also doesn't offer any options, it seems like the plugin will be substantially more difficult to deal with, which superficially isn't very encouraging. Obviously the option of the SWC version already goes out the door anyways, so that piece isn't a loss

I'm sure there's some technical reasons but it's not very confidence inducing that the plugin seemingly doesn't wrap the react plugin in some way or this isn't made available as it's own babel transform.

Def know the team needs time, so I am patient and curious to see what the team comes up with, but I think a pressing question is how will the plugin keep up with features/optimizations done in the official vite react plugin?

And in the most sincere way, since Vite + RR seems like the main/recommended candidate for framework mode it's troubling how this was missed when making the decision to use a plugin?

[sdavids]

Stumbled upon this issue via:

https://react.dev/learn/react-compiler#usage-with-vite
https://react.dev/learn/react-compiler#usage-with-remix

[mikkpokk]

Stumbled upon this issue via:

https://react.dev/learn/react-compiler#usage-with-vite https://react.dev/learn/react-compiler#usage-with-remix

Doesn't work with RR7 as expected. Causes randomly Invalid Hook Call errors during navigation.