Use Buffer polyfill

packages/keychain/.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { join, dirname } from "path";
+import { mergeConfig } from "vite";
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -19,7 +20,20 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: "./vite.config.ts",
+      },
+    },
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      build: {
+        rollupOptions: {
+          external: ["vite-plugin-node-polyfills/shims/global"],
+        },
+      },
+    });
   },
   staticDirs: ["../public"],
 };

packages/keychain/package.json

@@ -83,6 +83,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^6.0.3",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^2.1.8",

packages/keychain/vite.config.ts

@@ -2,9 +2,20 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 export default defineConfig(({ mode }) => ({
-  plugins: [wasm(), topLevelAwait(), react()],
+  plugins: [
+    nodePolyfills({
+      include: ["buffer"],
+      globals: {
+        Buffer: true,
+      },
+    }),
+    wasm(),
+    topLevelAwait(),
+    react(),
+  ],
   server: {
     port: mode === "development" ? 3001 : undefined,
   },
@@ -15,4 +26,9 @@ export default defineConfig(({ mode }) => ({
   },
   root: "./",
   publicDir: "public",
+  build: {
+    rollupOptions: {
+      external: ["vite-plugin-node-polyfills/shims/global"],
+    },
+  },
 }));