From 1ac1ed86e9e5ec5468e8bdc40875e05811863138 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Mon, 19 Dec 2022 21:44:15 +0800
Subject: [PATCH] Fix client only import with importsNotUsedAsValues error
 (#5639)

---
 .changeset/two-pants-enjoy.md                               | 5 +++++
 .../fixtures/client-only/src/components/ReactCounter.jsx    | 3 +++
 packages/astro/e2e/fixtures/client-only/tsconfig.json       | 5 +++++
 packages/astro/src/vite-plugin-astro/compile.ts             | 6 ++++++
 packages/astro/src/vite-plugin-jsx/index.ts                 | 6 ++++++
 5 files changed, 25 insertions(+)
 create mode 100644 .changeset/two-pants-enjoy.md
 create mode 100644 packages/astro/e2e/fixtures/client-only/tsconfig.json

diff --git a/.changeset/two-pants-enjoy.md b/.changeset/two-pants-enjoy.md
new file mode 100644
index 000000000000..b6a54983eaf0
--- /dev/null
+++ b/.changeset/two-pants-enjoy.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix `client:only` imports with `"importsNotUsedAsValues": "error"` tsconfig
diff --git a/packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx b/packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx
index 30d804199bbd..770f938900d7 100644
--- a/packages/astro/e2e/fixtures/client-only/src/components/ReactCounter.jsx
+++ b/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);
diff --git a/packages/astro/e2e/fixtures/client-only/tsconfig.json b/packages/astro/e2e/fixtures/client-only/tsconfig.json
new file mode 100644
index 000000000000..9e4ac6056834
--- /dev/null
+++ b/packages/astro/e2e/fixtures/client-only/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "importsNotUsedAsValues": "error"
+  }
+}
\ No newline at end of file
diff --git a/packages/astro/src/vite-plugin-astro/compile.ts b/packages/astro/src/vite-plugin-astro/compile.ts
index f9e581e841fd..e63c0605c310 100644
--- a/packages/astro/src/vite-plugin-astro/compile.ts
+++ b/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({
diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts
index b4d90c79d1e3..534c8a853fff 100644
--- a/packages/astro/src/vite-plugin-jsx/index.ts
+++ b/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,