Fix cloudflare ssr conditions setup (#465)

Author: bluwy

.changeset/shy-bananas-wait.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': patch
+---
+
+Fixes setting custom `workerd` and `worker` conditions for the ssr environment only

package.json

@@ -29,15 +29,6 @@
   "packageManager": "pnpm@9.7.1",
   "pnpm": {
     "peerDependencyRules": {
-      "ignoreMissing": [
-        "rollup",
-        "@babel/core",
-        "@babel/plugin-transform-react-jsx",
-        "vite",
-        "react",
-        "react-dom",
-        "@types/react"
-      ],
       "allowAny": ["astro", "vite"]
     }
   },

packages/cloudflare/package.json

@@ -37,6 +37,7 @@
     "magic-string": "^0.30.14",
     "miniflare": "^3.20241106.1",
     "tiny-glob": "^0.2.9",
+    "vite": "^6.0.2",
     "wrangler": "^3.91.0"
   },
   "peerDependencies": {
@@ -50,8 +51,7 @@
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "rollup": "^4.27.4",
-    "strip-ansi": "^7.1.0",
-    "vite": "6.0.1"
+    "strip-ansi": "^7.1.0"
   },
   "publishConfig": {
     "provenance": true

packages/cloudflare/src/index.ts

@@ -12,6 +12,7 @@ import {
 import { createRedirectsFromAstroRoutes } from '@astrojs/underscore-redirects';
 import astroWhen from '@inox-tools/astro-when';
 import { AstroError } from 'astro/errors';
+import { defaultServerConditions } from 'vite';
 import { type GetPlatformProxyOptions, getPlatformProxy } from 'wrangler';
 import {
 	type CloudflareModulePluginExtra,
@@ -213,12 +214,13 @@ export default function createIntegration(args?: Options): AstroIntegration {
 						}
 					}
 
-					vite.resolve.conditions ||= [];
-					// We need those conditions, previous these conditions where applied at the esbuild step which we removed
-					// https://github.com/withastro/astro/pull/7092
-					vite.resolve.conditions.push('workerd', 'worker');
-
+					// Support `workerd` and `worker` conditions for the ssr environment
+					// (previously supported in esbuild instead: https://github.com/withastro/astro/pull/7092)
 					vite.ssr ||= {};
+					vite.ssr.resolve ||= {};
+					vite.ssr.resolve.conditions ||= [...defaultServerConditions];
+					vite.ssr.resolve.conditions.push('workerd', 'worker');
+
 					vite.ssr.target = 'webworker';
 					vite.ssr.noExternal = true;
 
@@ -250,21 +252,6 @@ export default function createIntegration(args?: Options): AstroIntegration {
 						...vite.define,
 					};
 				}
-				// we thought that vite config inside `if (target === 'server')` would not apply for client
-				// but it seems like the same `vite` reference is used for both
-				// so we need to reset the previous conflicting setting
-				// in the future we should look into a more robust solution
-				if (target === 'client') {
-					vite.resolve ||= {};
-					vite.resolve.conditions ||= [];
-					vite.resolve.conditions = vite.resolve.conditions.filter(
-						(c) => c !== 'workerd' && c !== 'worker'
-					);
-
-					vite.build ||= {};
-					vite.build.rollupOptions ||= {};
-					vite.build.rollupOptions.output ||= {};
-				}
 			},
 			'astro:build:done': async ({ pages, routes, dir, logger }) => {
 				await cloudflareModulePlugin.afterBuildCompleted(_config);

packages/cloudflare/test/fixtures/with-svelte/astro.config.mjs

@@ -0,0 +1,9 @@
+import cloudflare from '@astrojs/cloudflare';
+import svelte from "@astrojs/svelte";
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+	integrations: [svelte()],
+	adapter: cloudflare(),
+	output: 'server',
+});

packages/cloudflare/test/fixtures/with-svelte/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/astro-cloudflare-with-svelte",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/cloudflare": "workspace:*",
+    "@astrojs/svelte": "^7.0.1",
+    "astro": "^5.0.0",
+    "svelte": "^5.6.0"
+  }
+}

packages/cloudflare/test/fixtures/with-svelte/src/components/Component.svelte

@@ -0,0 +1 @@
+<div class="svelte">Svelte Content</div>

packages/cloudflare/test/fixtures/with-svelte/src/pages/index.astro

@@ -0,0 +1,13 @@
+---
+import Component from '../components/Component.svelte';
+---
+
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+<h1>Testing</h1>
+<Component />
+</body>
+</html>

packages/cloudflare/test/with-solid-js.test.js

@@ -6,7 +6,7 @@ import { astroCli, wranglerCli } from './_test-utils.js';
 
 const root = new URL('./fixtures/with-solid-js/', import.meta.url);
 
-describe('SolidJS', { skip: 'Figure out why the test fail.' }, () => {
+describe('SolidJS', () => {
 	let wrangler;
 	before(async () => {
 		await astroCli(fileURLToPath(root), 'build');

packages/cloudflare/test/with-svelte.test.js

@@ -0,0 +1,37 @@
+import * as assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import * as cheerio from 'cheerio';
+import { astroCli, wranglerCli } from './_test-utils.js';
+
+const root = new URL('./fixtures/with-svelte/', import.meta.url);
+
+describe('Svelte', () => {
+	let wrangler;
+	before(async () => {
+		await astroCli(fileURLToPath(root), 'build');
+
+		wrangler = wranglerCli(fileURLToPath(root));
+		await new Promise((resolve) => {
+			wrangler.stdout.on('data', (data) => {
+				// console.log('[stdout]', data.toString());
+				if (data.toString().includes('http://127.0.0.1:8788')) resolve();
+			});
+			wrangler.stderr.on('data', (data) => {
+				// console.log('[stderr]', data.toString());
+			});
+		});
+	});
+
+	after((done) => {
+		wrangler.kill();
+	});
+
+	it('renders the svelte component', async () => {
+		const res = await fetch('http://127.0.0.1:8788/');
+		assert.equal(res.status, 200);
+		const html = await res.text();
+		const $ = cheerio.load(html);
+		assert.equal($('.svelte').text(), 'Svelte Content');
+	});
+});