Fix build error using buildSsrCjsExternalHeuristics

mayank99 · Sep 12, 2022 · 0febd5c · 0febd5c
1 parent 4e43d00
commit 0febd5c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -4,15 +4,15 @@ This monorepo will show examples of various CSS-in-JS libraries in Astro. Curren
 
 ## Compatibility table
 
-| Library           | Status             | Notes                                                                  |
-| ----------------- | ------------------ | ---------------------------------------------------------------------- |
-| styled-components | ❌ Doesn't work    | Prod build errors with: `styled.div is not a function`                 |
-| emotion           | ❌ Doesn't work    | Prod build errors with: `styled.div is not a function`                 |
-| linaria           | 🟡 Partially works | `css` works perfectly using rollup plugin, `styled` causes build error |
-| stitches          | ✅ Works           | `<style>` tag for SSR needs to be in React component                   |
-| typestyle         | ✅ Works           | -                                                                      |
-| vanilla-extract   | ✅ Works           | -                                                                      |
-| solid-styled      | ❌ Doesn't work    | No vite or rollup plugin, also requires Context                        |
+| Library           | Status             | Notes                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| styled-components | 🟡 Partially works | Prod build errors with: `styled.div is not a function`. <br> Can be worked around with [`client:only`](https://docs.astro.build/en/reference/directives-reference/#clientonly) or by using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) (will cause FOUC though). |
+| emotion           | 🟡 Partially works | Prod build errors with: `styled.div is not a function`. <br> Can be worked around with [`client:only`](https://docs.astro.build/en/reference/directives-reference/#clientonly) or by using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) (will cause FOUC though). |
+| linaria           | ✅ Works           | Prod build errors with: `Named export 'styled' not found.`. <br> Can be worked around using [`vite.legacy.buildSsrCjsExternalHeuristics`](https://vitejs.dev/guide/ssr.html#ssr-format) and [`vite.ssr.noExternal`](https://vitejs.dev/config/ssr-options.html#ssr-noexternal) or by downgrading to v3.                                                                                                 |
+| stitches          | ✅ Works           | `<style>` tag for SSR needs to be in React component                                                                                                                                                                                                                                                                                                                                                    |
+| typestyle         | ✅ Works           | -                                                                                                                                                                                                                                                                                                                                                                                                       |
+| vanilla-extract   | ✅ Works           | -                                                                                                                                                                                                                                                                                                                                                                                                       |
+| solid-styled      | ❌ Doesn't work    | No vite or rollup plugin, also requires Context                                                                                                                                                                                                                                                                                                                                                         |
 
 ## Running locally
 

diff --git a/emotion/astro.config.mjs b/emotion/astro.config.mjs
@@ -4,4 +4,8 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react()],
+	vite: {
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['@emotion/*'] },
+	},
 });
diff --git a/linaria/astro.config.ts b/linaria/astro.config.ts
@@ -6,6 +6,8 @@ import linaria from '@linaria/rollup';
 export default defineConfig({
 	vite: {
 		plugins: [linaria()],
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['@linaria/*'] },
 	},
 	integrations: [react()],
 });
diff --git a/styled-components/astro.config.mjs b/styled-components/astro.config.mjs
@@ -4,4 +4,8 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
 	integrations: [react()],
+	vite: {
+		legacy: { buildSsrCjsExternalHeuristics: true },
+		ssr: { noExternal: ['styled-components'] },
+	},
 });