@opentrons/components 0.1.6-alpha.11 → 0.1.6-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.11",
+  "version": "0.1.6-alpha.15",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -23,7 +23,7 @@
     "styled-components": "5.3.6"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.11",
+    "@opentrons/shared-data": "0.1.6-alpha.15",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",

package/tsconfig.json

@@ -9,6 +9,8 @@
     "composite": true,
     "rootDir": "src",
     "outDir": "lib",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
   },
   "include": ["typings", "src"],
   "exclude": ["**/*.stories.tsx"]

package/vite.config.mts

@@ -6,22 +6,35 @@ import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
+import commonjs from '@rollup/plugin-commonjs' // Importing @rollup/plugin-commonjs to handle CJS to ESM conversion
 
 export default defineConfig({
   build: {
     // Relative to the root
     outDir: 'lib',
-    // do not delete the outdir, typescript types might live there and we dont want to delete them
+    // Do not delete the outdir, TypeScript types might live there, and we don't want to delete them
     emptyOutDir: false,
     lib: {
       entry: 'src/index.ts',
       formats: ['es', 'cjs'], // Generate both ES Module and CommonJS outputs
-      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
+      fileName: format => (format === 'es' ? 'index.mjs' : 'index.cjs'),
     },
     rollupOptions: {
       external: ['react', 'react-dom', 'styled-components'], // Ensure peer dependencies are not bundled
+      output: {
+        exports: 'named', // Use named exports for compatibility with styled-components in CJS
+        globals: {
+          'styled-components': 'styled', // Ensure styled-components maps correctly in UMD builds
+        },
+        plugins: [
+          commonjs({
+            include: /node_modules/, // Include node_modules for CommonJS conversion
+            transformMixedEsModules: true, // Ensure proper handling of mixed modules
+          }),
+        ],
+      },
     },
-    target: 'es2017', // Transpile down to a compatible version for Next.js (for Protocol Library)
+    target: 'es2017', // Transpile down to a compatible version for Next.js
   },
   plugins: [
     react({
@@ -51,7 +64,7 @@ export default defineConfig({
   },
   define: {
     'process.env': process.env,
-    global: 'globalThis',
+    global: 'globalThis', // Fix issues with globalThis in some environments
   },
   resolve: {
     alias: {