fix: add some deps as external

without this config, importing @fuels/ui was breaking

packages/ui/package.json

@@ -37,11 +37,11 @@
         "typings": "./dist/theme/tailwind-preset.d.ts"
       },
       "./styles.css": "./dist/styles.css"
-    },
-    "files": [
-      "dist"
-    ]
+    }
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build:lib": "tsup --dts",
     "build:preview": "storybook build -o ../app-explorer/public/ui",
@@ -81,7 +81,8 @@
     "tailwind-variants": "0.1.20",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-radix": "3.0.3",
-    "tailwindcss-themer": "4.0.0"
+    "tailwindcss-themer": "4.0.0",
+    "tailwindcss": "3.4.4"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-meta-url": "0.18.0",
@@ -107,7 +108,6 @@
     "postcss-import": "16.0.0",
     "storybook": "^8.0.8",
     "storybook-addon-theme": "workspace:*",
-    "tailwindcss": "3.4.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "5.4.5",
     "vite": "^5.1.3",

packages/ui/tsup.config.mjs

@@ -1,9 +1,9 @@
-import tsconfig from './tsconfig.json';
+import tsconfig from "./tsconfig.json";
 
 const defConfig = {
-  outDir: 'dist',
+  outDir: "dist",
   splitting: true,
-  format: ['esm', 'cjs'],
+  format: ["esm", "cjs"],
   outExtension({ format }) {
     return {
       js: `.${format}.js`,
@@ -16,31 +16,34 @@ const defConfig = {
     options.banner = {
       js: "'use client'",
     };
+
+    /* This is needed to not get any errors from dynamic requiring */
+    options.external = ["react", "react-dom", "tailwindcss"];
   },
 };
 
 export default [
   {
     ...defConfig,
     entry: {
-      index: 'src/index.ts',
+      index: "src/index.ts",
     },
-    publicDir: 'public',
+    publicDir: "public",
   },
   {
     ...defConfig,
     entry: {
-      index: 'src/theme/tailwind-preset.ts',
+      index: "src/theme/tailwind-preset.ts",
     },
-    format: ['cjs'],
-    outDir: 'dist/theme',
+    format: ["cjs"],
+    outDir: "dist/theme",
   },
   {
     entry: {
-      styles: 'src/theme/index.css',
+      styles: "src/theme/index.css",
     },
     loader: {
-      '.css': 'css',
+      ".css": "css",
     },
   },
 ];