Duplicate React instance when adding Deno plugin + cjs-to-esm and importing UI component

[nestarz]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

I started from the base example and added two plugins: a Deno plugin and the official cjs-to-esm plugin. I also import a component from the base UI lib. After these changes the app ends up with a duplicate instance of React (two React copies), which breaks hooks and causes errors like “Invalid hook call”.

What I changed

• Based this on the base example

• Added a Deno resolution plugin (same as the one discussed in vitejs/vite#20849 )

• Added cjstoesm (cjs-to-esm) plugin

• Imported a component from the base UI lib

Expected behavior: Single React instance used across the app and plugins; no hook errors.

Actual behavior: Duplicate React instance (two copies), causing hook errors and runtime issues.

Reproduction

https://github.com/nestarz/deno-vite-issue-3

Steps to reproduce

1. Clone https://github.com/nestarz/deno-vite-issue-3

2. Install deps / follow repo’s README to run dev build

3. Start dev server (or build)

4. Load the app and observe console errors about duplicate React/Invalid hook call

System Info

macos 26, deno 2.5.3

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.

[hi-ogawa]

The reproduction works if I add:

  environments: {
    ssr: {
      ...
      resolve: {
        noExternal: ['@base-ui-components/react', '@base-ui-components/utils'],
      },
    }

@vitejs/plugin-rsc uses crawlFrameworkPkgs from vitefu https://github.com/svitejs/vitefu to auto configure this, but this utility depends on package.json convention, so it fails to find these dependencies. It looks like adding dummy package.json with @base-ui-components/reac works too.

vite-plugin-react/packages/plugin-rsc/src/plugin.ts

Lines 340 to 360 in 73be2f0

	// crawl packages with "react" in "peerDependencies" to bundle react deps on server
	// see https://github.com/svitejs/vitefu/blob/d8d82fa121e3b2215ba437107093c77bde51b63b/src/index.js#L95-L101
	const result = await crawlFrameworkPkgs({
	root: process.cwd(),
	isBuild: env.command === 'build',
	isFrameworkPkgByJson(pkgJson) {
	if ([PKG_NAME, 'react-dom'].includes(pkgJson.name)) {
	return
	}
	const deps = pkgJson['peerDependencies']
	return deps && 'react' in deps
	},
	})
	const noExternal = [
	'react',
	'react-dom',
	'server-only',
	'client-only',
	PKG_NAME,
	...result.ssr.noExternal.sort(),
	]

This is an expected behavior and it requires vitefu to support deno.json.

[nestarz]

Thank you! Instead of updating vitefu to support deno, can I hook to the part of the code that lists the externals so I can add myself the dependencies that relies on react, like by adding a callback to the rsc plugin configuration option, as it will be called after the deno resolution I can use a cache that is fed during resolution ? Also, why can't I just externalize everything ?

[hi-ogawa]

Also, why can't I just externalize everything ?

This is because RSC bundler needs to find any potential "use client" and "use server" in react 3rd party packages.

Instead of updating vitefu to support deno, can I hook to the part of the code that lists the externals so I can add myself the dependencies that relies on react, like by adding a callback to the rsc plugin configuration option, as it will be called after the deno resolution I can use a cache that is fed during resolution ?

I think you can create vitefu like utility for deno on your own and setup noExternal in your plugin since that's just basically Vite plugin API and that's how @vitejs/plugin-rsc does this. If something needed for @vitejs/plugin-rsc, please feel free to let me know.

{
  name: 'rsc-deno-helper-plugin',
  async config() {
     const result = crawlPackagesWithReactPeerDepThroughDenoJson(....);
     return {
       environments: {
         ssr: {
            resolve: { noExternal: result }
         },
         rsc: {
            resolve: { noExternal: result }
         },
       },
     }
  }
}

[hi-ogawa]

Oh, also mentioning that noExternal: true might be fine in some case, but @vitejs/plugin-rsc doesn't do that by default and only limit to react 3rd party packages. This is again because Vite SSR is normally happier if the dependency are externalized.

[nestarz]

I will experiment around your suggestions, thank you very much @hi-ogawa.

Do you think that we could expect Full Bundle Mode coming with vite to remove those hacks around external/optimizeDeps that are cumbersome and prone to errors?