Polyfill production

apps/playground/frontend/package.json

@@ -45,6 +45,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",
+    "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0"
   }

apps/playground/frontend/src/global.ts

@@ -1,10 +1,26 @@
+// Polyfill for Node.js Buffer
 import { Buffer } from 'buffer';
 
-// @ts-expect-error - We're adding process.env to globalThis for compatibility with Node.js modules
-globalThis.process = {
-  env: {
-    NODE_ENV: import.meta.env.MODE, // Map `MODE` to `process.env.NODE_ENV`.
-  },
-};
+// Ensure process.env is available globally
+if (typeof globalThis.process === 'undefined') {
+  // @ts-expect-error - Adding process to globalThis for Node.js compatibility
+  globalThis.process = {
+    env: {
+      NODE_ENV: import.meta.env.MODE || 'production',
+    },
+    version: '', // Some libraries might check for process.version
+    cwd: () => '/', // Default current working directory
+  };
+}
 
-globalThis.Buffer = Buffer;
+// Ensure Buffer is available globally
+if (typeof globalThis.Buffer === 'undefined') {
+  globalThis.Buffer = Buffer;
+}
+
+// For environments that expect process.browser
+// @ts-expect-error - Adding process.browser for compatibility
+if (typeof process !== 'undefined' && !process.browser) {
+  // @ts-expect-error - Adding process.browser
+  process.browser = true;
+}

apps/playground/frontend/vite.config.ts

@@ -5,19 +5,61 @@ import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import wasm from 'vite-plugin-wasm';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import tailwindcss from "@tailwindcss/vite"
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [wasm(), react(), viteCommonjs(), topLevelAwait(), tailwindcss()],  //add plugins
+export default defineConfig(({ mode }) => ({
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
+    'process.env': {},
+    global: 'globalThis',
+  },
+  plugins: [
+    nodePolyfills({
+      // To add only specific polyfills, add them here.
+      // If no specific polyfills are needed, you can leave this empty.
+      include: ['buffer', 'process'],
+      globals: {
+        Buffer: true,
+        process: true,
+      },
+    }),
+    wasm(),
+    react(),
+    viteCommonjs(),
+    topLevelAwait(),
+    tailwindcss(),
+  ],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),      
+      '@': path.resolve(__dirname, './src'),
+      // Add any other aliases you need
     },
   },
-  // exclude bundling the onchain runtime during dev
-  optimizeDeps: {    
-    exclude: [      
+  optimizeDeps: {
+    esbuildOptions: {
+      // Node.js global to browser globalThis
+      define: {
+        global: 'globalThis',
+      },
+    },
+    exclude: [
       "@midnight-ntwrk/onchain-runtime"
     ],
   },
-})
+  build: {
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    rollupOptions: {
+      // Ensure proper handling of Node.js built-ins
+      external: [],
+    },
+  },
+  server: {
+    fs: {
+      // Allow serving files from one level up from the package root
+      allow: ['..'],
+    },
+  },
+}))