Add node polyfills

package-lock.json

@@ -40,6 +40,7 @@
         "twemoji": "14.0.2"
       },
       "devDependencies": {
+        "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-wasm": "6.1.1",
         "@types/node": "18.11.18",
         "@types/react": "18.0.26",
@@ -56,6 +57,7 @@
         "eslint-plugin-react-hooks": "4.6.0",
         "mini-svg-data-uri": "1.4.4",
         "prettier": "2.8.1",
+        "rollup-plugin-node-polyfills": "0.2.1",
         "sass": "1.56.2",
         "typescript": "4.9.4",
         "vite": "4.0.1",
@@ -454,6 +456,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esbuild-plugins/node-globals-polyfill": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-globals-polyfill/-/node-globals-polyfill-0.2.3.tgz",
+      "integrity": "sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==",
+      "dev": true,
+      "peerDependencies": {
+        "esbuild": "*"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.16.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.16.9.tgz",
@@ -2646,6 +2657,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4490,6 +4507,45 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-inject": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz",
+      "integrity": "sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1",
+        "magic-string": "^0.25.3",
+        "rollup-pluginutils": "^2.8.1"
+      }
+    },
+    "node_modules/rollup-plugin-inject/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/rollup-plugin-node-polyfills": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-polyfills/-/rollup-plugin-node-polyfills-0.2.1.tgz",
+      "integrity": "sha512-4kCrKPTJ6sK4/gLL/U5QzVT8cxJcofO0OU74tnB19F40cmuAKSzH5/siithxlofFEjwvw1YAhPmbvGNA6jEroA==",
+      "dev": true,
+      "dependencies": {
+        "rollup-plugin-inject": "^3.0.0"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4658,6 +4714,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",

package.json

@@ -50,6 +50,7 @@
     "twemoji": "14.0.2"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-wasm": "6.1.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
@@ -66,6 +67,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "mini-svg-data-uri": "1.4.4",
     "prettier": "2.8.1",
+    "rollup-plugin-node-polyfills": "0.2.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
     "vite": "4.0.1",

vite.config.js

@@ -2,6 +2,8 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { wasm } from '@rollup/plugin-wasm';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
 import { svgLoader } from './viteSvgLoader';
 
 const copyFiles = {
@@ -25,6 +27,42 @@ const copyFiles = {
   ],
 }
 
+const nodePolyfillAliases = {
+  util: 'rollup-plugin-node-polyfills/polyfills/util',
+  sys: 'util',
+  // events: 'rollup-plugin-node-polyfills/polyfills/events',
+  stream: 'rollup-plugin-node-polyfills/polyfills/stream',
+  path: 'rollup-plugin-node-polyfills/polyfills/path',
+  querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
+  punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
+  url: 'rollup-plugin-node-polyfills/polyfills/url',
+  string_decoder:
+      'rollup-plugin-node-polyfills/polyfills/string-decoder',
+  http: 'rollup-plugin-node-polyfills/polyfills/http',
+  https: 'rollup-plugin-node-polyfills/polyfills/http',
+  os: 'rollup-plugin-node-polyfills/polyfills/os',
+  assert: 'rollup-plugin-node-polyfills/polyfills/assert',
+  constants: 'rollup-plugin-node-polyfills/polyfills/constants',
+  _stream_duplex:
+      'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
+  _stream_passthrough:
+      'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
+  _stream_readable:
+      'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
+  _stream_writable:
+      'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
+  _stream_transform:
+      'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
+  timers: 'rollup-plugin-node-polyfills/polyfills/timers',
+  console: 'rollup-plugin-node-polyfills/polyfills/console',
+  vm: 'rollup-plugin-node-polyfills/polyfills/vm',
+  zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
+  tty: 'rollup-plugin-node-polyfills/polyfills/tty',
+  domain: 'rollup-plugin-node-polyfills/polyfills/domain',
+  buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
+  process: 'rollup-plugin-node-polyfills/polyfills/process-es6'
+}
+
 export default defineConfig({
   appType: 'spa',
   publicDir: false,
@@ -38,9 +76,33 @@ export default defineConfig({
     wasm(),
     react(),
   ],
+  resolve: {
+    alias: nodePolyfillAliases
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+        define: {
+          global: 'globalThis'
+        },
+        plugins: [
+          // Enable esbuild polyfill plugins
+          NodeGlobalsPolyfillPlugin({
+            process: false,
+            buffer: true,
+          }),
+        ]
+    }
+},
   build: {
     outDir: 'dist',
     sourcemap: true,
     copyPublicDir: false,
+    rollupOptions: {
+      plugins: [
+        // Enable rollup polyfills plugin
+        // used during production bundling
+        rollupNodePolyFill({ crypto: true }),
+      ]
+    }
   },
 });