Vite plugin does not work with Cloudflare vite plugin

[kigawas]

Describe the bug

Run pnpm create cloudflare@latest my-react-router-app --framework=react-router and update vite config. Or see reproduction below.

Error: The following environment configurations are incompatible with the Cloudflare Vite plugin:
        - "ssr" environment: `resolve.external`: ["@vanilla-extract/css","@vanilla-extract/css/fileScope","@vanilla-extract/css/adapter"]
To resolve this issue, avoid setting `optimizeDeps.exclude` and `resolve.external` in your Cloudflare Worker environments.

Reproduction

https://github.com/kigawas/vanilla-extract-cloudflare

System Info

Not related

Used Package Manager

pnpm

Logs

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[jamesopstad]

Hi. I work on @cloudflare/vite-plugin. It would help us to understand what's needed if someone could explain why ssr.external is needed in @vanilla-extract/vite-plugin?

vanilla-extract/packages/vite-plugin/src/index.ts

Lines 145 to 151 in 6714033

	ssr: {
	external: [
	'@vanilla-extract/css',
	'@vanilla-extract/css/fileScope',
	'@vanilla-extract/css/adapter',
	],
	},

The reason we prevent resolve.external for the ssr environment is that all dependencies need to be bundled for deployment to Cloudflare. Thanks.

[BPScott]

I've been running Vite with the following plugin (added after vanillaExtract() in my plugins array), and it seems to work without issue.

export function vanillaExtractSsrFixPlugin() {
  const externalsToRemove = new Set([
    '@vanilla-extract/css',
    '@vanilla-extract/css/fileScope',
    '@vanilla-extract/css/adapter',
  ]);

  return {
    name: 'vanilla-extract-ssr-fix',
    config(config) {
      if (config.ssr && Array.isArray(config.ssr.external)) {
        config.ssr.external = config.ssr.external.filter((external) => {
          return !externalsToRemove.has(external);
        });
      }
    },
  };
}