Only attach SVG component in SSR (#14623)

* Only attach SVG component in SSR

* Add test that checks React bundle doesn’t include server code

* Properly describe tests

* Rename test suite

* Add dev server test

* Fix lockfile

* Make test error messages consistent

* Clean up build fixture

* Fix fixture name in tests

* Fix tests

* Add changeset

---------

Co-authored-by: Florian Lefebvre <[email protected]>

Author: delucis

.changeset/silver-radios-smile.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a leak of server runtime code when importing SVGs in client-side code. Previously, when importing an SVG file in client code, Astro could end up adding code for rendering SVGs on the server to the client bundle.

packages/astro/src/assets/vite-plugin-assets.ts

@@ -241,16 +241,17 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
 						});
 					}
 
-					if (id.endsWith('.svg')) {
-						const contents = await fs.promises.readFile(imageMetadata.fsPath, { encoding: 'utf8' });
-						// We know that the contents are present, as we only emit this property for SVG files
-						return { code: makeSvgComponent(imageMetadata, contents) };
-					}
-
 					// We can only reliably determine if an image is used on the server, as we need to track its usage throughout the entire build.
 					// Since you cannot use image optimization on the client anyway, it's safe to assume that if the user imported
 					// an image on the client, it should be present in the final build.
 					if (options?.ssr) {
+						if (id.endsWith('.svg')) {
+							const contents = await fs.promises.readFile(imageMetadata.fsPath, {
+								encoding: 'utf8',
+							});
+							// We know that the contents are present, as we only emit this property for SVG files
+							return { code: makeSvgComponent(imageMetadata, contents) };
+						}
 						return {
 							code: `export default ${getProxyCode(
 								imageMetadata,

packages/astro/test/core-image-svg-in-island.test.js

@@ -0,0 +1,73 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('astro:assets - SVG Components in Astro Islands', async () => {
+	/** @type {import('./test-utils.js').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/core-image-svg-in-island/',
+		});
+	});
+
+	describe('dev', () => {
+		/** @type {import('./test-utils.js').DevServer} */
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(() => devServer.stop());
+
+		it('SVG metadata imported in React island is small', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html, { xml: true });
+			const island = $('astro-island');
+			const componentUrl = island.attr('component-url');
+			assert.ok(componentUrl, 'Expected component-url attribute to be present on astro-island.');
+			const componentModule = await fixture.fetch(componentUrl).then((res) => res.text());
+			const imports = componentModule
+				.split('\n')
+				.map((line) => line.trim())
+				.filter((line) => line.startsWith('import '));
+			const svgImportStatement = imports.find((imp) => imp.includes('src/components/astro.svg'));
+			assert.ok(svgImportStatement, 'Expected SVG to be imported in the component.');
+			const importPath = svgImportStatement.split('from')[1].trim().replace(/['";]/g, '');
+			const mod = await fixture.fetch(importPath).then((res) => res.text());
+			assert.ok(
+				mod.length < 1_500,
+				`Expected SVG module to be smaller than 1500 bytes, got ${mod.length} bytes. If this test fails, it is likely that server code has been imported while importing an SVG.`,
+			);
+			assert.ok(
+				!mod.includes('import'),
+				'Expected client-side SVG not to include import statements.',
+			);
+		});
+	});
+
+	describe('build', () => {
+		before(() => fixture.build({}));
+
+		after(() => fixture.clean());
+
+		it('React bundle size is small when importing an SVG', async () => {
+			const files = await fixture.readdir('_astro');
+			const bundledReactComponentFilename = files.find(
+				(f) => f.startsWith('ReactTest.') && f.endsWith('.js'),
+			);
+			assert.ok(bundledReactComponentFilename, 'Expected to find React component in build output.');
+			const bundledReactComponent = await fixture.readFile(
+				`_astro/${bundledReactComponentFilename}`,
+			);
+			assert.ok(bundledReactComponent, 'Expected React component bundle not to be empty');
+			assert.ok(
+				bundledReactComponent.length < 1_000,
+				`Expected React component bundle to be smaller than 1000 bytes, got ${bundledReactComponent.length} bytes. If this test fails, it is likely that server code has been imported while importing an SVG.`,
+			);
+		});
+	});
+});

packages/astro/test/fixtures/core-image-svg-in-island/astro.config.mjs

@@ -0,0 +1,5 @@
+import react from '@astrojs/react';
+import { defineConfig } from 'astro/config';
+export default defineConfig({
+  integrations: [react()],
+});

packages/astro/test/fixtures/core-image-svg-in-island/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@test/core-image-svg-in-client",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build"
+  }
+}

packages/astro/test/fixtures/core-image-svg-in-island/src/components/ReactTest.tsx

@@ -0,0 +1,7 @@
+import AstroIcon from './astro.svg';
+
+export const Test = () => {
+	return (
+		<img src={AstroIcon.src} alt=""></img>
+	);
+};

packages/astro/test/fixtures/core-image-svg-in-island/src/components/astro.svg

@@ -0,0 +1,14 @@
+---
+import { Test } from '../components/ReactTest.tsx';
+---
+
+<html>
+<head>
+	<title>SVG in Client Components Test</title>
+</head>
+<body>
+	<div id="default">
+		<Test client:load />
+	</div>
+</body>
+</html>

packages/astro/test/fixtures/core-image-svg-in-island/src/pages/index.astro

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}