From 97ad91a1262af9c8c0a3ce2a4e2d00fd926a3fb1 Mon Sep 17 00:00:00 2001
From: Shlok Amin <shlokamin@me.com>
Date: Wed, 13 Nov 2024 15:23:06 -0500
Subject: [PATCH] chore(components): do not bundle styled components

closes RPLC-1013
---
 components/package.json    |  3 ++-
 components/vite.config.mts | 14 ++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/package.json b/components/package.json
index 7d63ed25e44..6dcb205b4be 100644
--- a/components/package.json
+++ b/components/package.json
@@ -19,7 +19,8 @@
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.6"
   },
   "dependencies": {
     "@opentrons/shared-data": "link:../shared-data",
diff --git a/components/vite.config.mts b/components/vite.config.mts
index 757aa06d443..63ac6888dde 100644
--- a/components/vite.config.mts
+++ b/components/vite.config.mts
@@ -10,14 +10,18 @@ import lostCss from 'lost'
 export default defineConfig({
   build: {
     // Relative to the root
-    ssr: 'src/index.ts',
     outDir: 'lib',
     // do not delete the outdir, typescript types might live there and we dont want to delete them
     emptyOutDir: false,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-      esmExternals: true,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'], // Generate both ES Module and CommonJS outputs
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
     },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'styled-components'], // Ensure peer dependencies are not bundled
+    },
+    target: 'es2017', // Transpile down to a compatible version for Next.js (for Protocol Library)
   },
   plugins: [
     react({
@@ -32,6 +36,7 @@ export default defineConfig({
     esbuildOptions: {
       target: 'es2020',
     },
+    exclude: ['styled-components'], // Avoid pre-bundling styled-components
   },
   css: {
     postcss: {
@@ -55,5 +60,6 @@ export default defineConfig({
         '../components/src/index.module.css'
       ),
     },
+    dedupe: ['styled-components'], // Prevent duplicate styled-components instances
   },
 })