Fix client only import with importsNotUsedAsValues error (withastro#5639

)
h3y6e · Dec 19, 2022 · 1ac1ed8 · 1ac1ed8
1 parent 53e0c98
commit 1ac1ed8
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 0 deletions.
diff --git a/.changeset/two-pants-enjoy.md 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
@@ -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
@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "importsNotUsedAsValues": "error"
+ }
+}
diff --git 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
@@ -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,