playground: fix build (#1571)

yarn dev was working fine, but yarn build had some issues with crypto
polyfill

davidmyersdev/vite-plugin-node-polyfills#92 (comment)

packages/playground/package.json

@@ -59,6 +59,7 @@
         "tailwindcss": "^3.4.4",
         "typescript": "^5.1.6",
         "vite": "^5.3.1",
-        "vite-plugin-checker": "^0.8.0"
+        "vite-plugin-checker": "^0.8.0",
+        "vite-plugin-replace": "^0.1.1"
     }
 }

packages/playground/vite.config.ts

@@ -2,6 +2,7 @@ import react from '@vitejs/plugin-react'
 import { defineConfig, loadEnv } from 'vite'
 import { default as checker } from 'vite-plugin-checker'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import { replaceCodePlugin } from 'vite-plugin-replace'
 import path from 'path'
 
 // https://vitejs.dev/config/
@@ -14,6 +15,21 @@ export default ({ mode }: { mode: string }) => {
             'process.browser': true,
         },
         plugins: [
+            replaceCodePlugin({
+                replacements: [
+                    {
+                        from: `if ((crypto && crypto.getRandomValues) || !process.browser) {
+  exports.randomFill = randomFill
+  exports.randomFillSync = randomFillSync
+} else {
+  exports.randomFill = oldBrowser
+  exports.randomFillSync = oldBrowser
+}`,
+                        to: `exports.randomFill = randomFill
+exports.randomFillSync = randomFillSync`,
+                    },
+                ],
+            }),
             checker({
                 typescript: true,
                 eslint: {
@@ -31,5 +47,8 @@ export default ({ mode }: { mode: string }) => {
         server: {
             port: 3100,
         },
+        build: {
+            target: 'esnext',
+        },
     })
 }

yarn.lock

@@ -6260,6 +6260,7 @@ __metadata:
     vite: ^5.3.1
     vite-plugin-checker: ^0.8.0
     vite-plugin-node-polyfills: ^0.22.0
+    vite-plugin-replace: ^0.1.1
     wagmi: ^1.4.12
     zod: ^3.21.4
   languageName: unknown
@@ -29485,6 +29486,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-replace@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "vite-plugin-replace@npm:0.1.1"
+  peerDependencies:
+    vite: ^2
+  checksum: 247ccdc61605f0a2e097e25fd31cc3528ecb8682dc691fdb5944cc67e427f2ca66864f3bdb21cfb80f835f62366fec8d86f38a2e427f11e016acdbc51219a117
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.0.0, vite@npm:^5.3.1":
   version: 5.3.1
   resolution: "vite@npm:5.3.1"