Fix client only import with importsNotUsedAsValues error (#5639)

.changeset/two-pants-enjoy.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix `client:only` imports with `"importsNotUsedAsValues": "error"` tsconfig

packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 
+// accessing browser globals as side effects is allowed if the component is client:only
+console.log(document.title)
+
 /** a counter written in React */
 export function Counter({ children, id }) {
 	const [count, setCount] = useState(0);

packages/astro/e2e/fixtures/client-only/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "importsNotUsedAsValues": "error"
+  }
+}

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

@@ -41,6 +41,12 @@ export async function cachedFullCompilation({
 			loader: 'ts',
 			target: 'esnext',
 			sourcemap: 'external',
+			tsconfigRaw: {
+				compilerOptions: {
+					// Ensure client:only imports are treeshaken
+					importsNotUsedAsValues: 'remove',
+				},
+			},
 		});
 	} catch (err: any) {
 		await enhanceCompileError({

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

@@ -140,6 +140,12 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi
 					loader: getEsbuildLoader(id),
 					jsx: 'preserve',
 					sourcemap: 'inline',
+					tsconfigRaw: {
+						compilerOptions: {
+							// Ensure client:only imports are treeshaken
+							importsNotUsedAsValues: 'remove',
+						},
+					},
 				});
 				return transformJSX({
 					code: jsxCode,