Stub out .astro imports in client modules (#14751)

Author: delucis

.changeset/quick-tomatoes-collect.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes hydration of client components when running the dev server and using a barrel file that re-exports both Astro and UI framework components.

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

@@ -205,7 +205,7 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 					return null;
 			}
 		},
-		async transform(source, id) {
+		async transform(source, id, options) {
 			if (hasSpecialQueries(id)) return;
 
 			const parsedId = parseAstroRequest(id);
@@ -228,6 +228,22 @@ export default function astro({ settings, logger }: AstroPluginOptions): vite.Pl
 			}
 
 			const filename = normalizePath(parsedId.filename);
+
+			// If an Astro component is imported in code used on the client, we return an empty
+			// module so that Vite doesn’t bundle the server-side Astro code for the client.
+			if (!options?.ssr) {
+				return {
+					code: `export default import.meta.env.DEV
+									? () => {
+											throw new Error(
+												'Astro components cannot be used in the browser.\\nTried to render "${filename}".'
+											);
+										}
+									: {};`,
+					meta: { vite: { lang: 'ts' } },
+				};
+			}
+
 			const transformResult = await compile(source, filename);
 
 			const astroMetadata: AstroPluginMetadata['astro'] = {

packages/astro/test/astro-component-bundling.test.js

@@ -1,21 +1,70 @@
 import assert from 'node:assert/strict';
-import { before, describe, it } from 'node:test';
+import { after, before, describe, it } from 'node:test';
 import { loadFixture } from './test-utils.js';
 
 describe('Component bundling', () => {
+	/** @type {import('./test-utils.js').Fixture} */
 	let fixture;
 
 	before(async () => {
 		fixture = await loadFixture({ root: './fixtures/astro-component-bundling/' });
-		await fixture.build();
 	});
 
-	it('should treeshake FooComponent', async () => {
-		const astroChunkDir = await fixture.readdir('/_astro');
-		const manyComponentsChunkName = astroChunkDir.find((chunk) =>
-			chunk.startsWith('ManyComponents'),
-		);
-		const manyComponentsChunkContent = await fixture.readFile(`/_astro/${manyComponentsChunkName}`);
-		assert.equal(manyComponentsChunkContent.includes('FooComponent'), false);
+	describe('dev', () => {
+		/** @type {import('./test-utils.js').DevServer} */
+		let devServer;
+
+		before(async () => {
+			devServer = await fixture.startDevServer();
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		it('should not include Astro components in client bundles', async () => {
+			const importedComponent = await fixture.fetch('/src/components/AstroComponent.astro');
+			const moduleContent = await importedComponent.text();
+			assert(
+				moduleContent.includes('Astro components cannot be used in the browser.'),
+				'Astro component imported from client should include error text in dev.',
+			);
+			assert(
+				moduleContent.length < 3500,
+				'Module content should be small and not include full server-side code.',
+			);
+			assert(
+				!moduleContent.includes('import '),
+				'Astro component imported from client should not include import statements.',
+			);
+		});
+	});
+
+	describe('build', () => {
+		before(async () => {
+			await fixture.build();
+		});
+
+		it('should treeshake FooComponent', async () => {
+			const astroChunkDir = await fixture.readdir('/_astro');
+			const manyComponentsChunkName = astroChunkDir.find((chunk) =>
+				chunk.startsWith('ManyComponents'),
+			);
+			const manyComponentsChunkContent = await fixture.readFile(
+				`/_astro/${manyComponentsChunkName}`,
+			);
+			assert.equal(manyComponentsChunkContent.includes('FooComponent'), false);
+		});
+
+		it('should not include Astro components in client bundles', async () => {
+			const html = await fixture.readFile('/astro-in-client/index.html');
+			const match = /<script.+<\/script>/.exec(html);
+			assert(match, 'Expected a <script> tag to be present');
+			assert.match(
+				match[0],
+				/^<script type="module">const \w=\{\};console.log\(\w\);<\/script>$/,
+				'Astro component on the client should be an empty object in prod',
+			);
+		});
 	});
 });

packages/astro/test/fixtures/astro-component-bundling/src/components/AstroComponent.astro

@@ -0,0 +1 @@
+<p>Example component</p>

packages/astro/test/fixtures/astro-component-bundling/src/pages/astro-in-client.astro

@@ -0,0 +1,13 @@
+---
+import AstroComponent from '../components/AstroComponent.astro';
+---
+<html>
+<head><title>Component bundling</title></head>
+<body>
+	<AstroComponent />
+	<script>
+		import AstroComponent from '../components/AstroComponent.astro';
+		console.log(AstroComponent);
+	</script>
+</body>
+</html>