Fix the demo (#2086)

Author: Adamj1232

examples/with-sveltekit/package.json

@@ -31,10 +31,17 @@
   },
   "type": "module",
   "dependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@fontsource/fira-mono": "^4.5.10",
-    "@web3-onboard/core": "^2.21.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@web3-onboard/core": "^2.21.3-alpha.1",
     "@web3-onboard/injected-wallets": "^2.8.5",
     "@web3-onboard/walletconnect": "^2.3.6",
-    "buffer": "^6.0.3"
+    "assert": "^2.1.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "stream-browserify": "^3.0.0"
   }
 }

examples/with-sveltekit/svelte.config.js

@@ -1,18 +1,24 @@
-import adapter from '@sveltejs/adapter-auto';
-import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-auto'
+import preprocess from 'svelte-preprocess'
 
-// For further build env configs and troubleshooting 
+// For further build env configs and troubleshooting
 // checkout our official docs [here](https://onboard.blocknative.com/docs/modules/core#sveltekit-vite)
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: preprocess(),
 
-	kit: {
-		adapter: adapter(),
-	}
-};
+  kit: {
+    adapter: adapter()
+  },
 
-export default config;
+  build: {
+    rollupOptions: {
+      external: ['buffer']
+    }
+  }
+}
+
+export default config

examples/with-sveltekit/vite.config.ts

@@ -1,10 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import inject from '@rollup/plugin-inject'
+import commonjs from '@rollup/plugin-commonjs';
 
 import type { UserConfig } from 'vite'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
 
-// For further build env configs and troubleshooting 
+// yarn add --dev @esbuild-plugins/node-globals-polyfill
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+// yarn add --dev @esbuild-plugins/node-modules-polyfill
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+
+// For further build env configs and troubleshooting
 // checkout our official docs [here](https://onboard.blocknative.com/docs/modules/core#sveltekit-vite)
 
 const MODE = process.env.NODE_ENV
@@ -15,44 +21,55 @@ const development = MODE === 'development'
 const config: UserConfig = {
   plugins: [
     sveltekit(),
+    commonjs({
+      include: /node_modules/ // Only transpile CommonJS modules from node_modules
+    }),
     development &&
       nodePolyfills({
-        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js'), 'http', 'crypto']
+        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js'), 'http', 'crypto', 'buffer']
       })
   ],
   resolve: {
     alias: {
       crypto: 'crypto-browserify',
       stream: 'stream-browserify',
-      assert: 'assert'
+      assert: 'assert',
+      zlib: 'browserify-zlib',
     }
   },
   build: {
     rollupOptions: {
       external: ['@web3-onboard/*'],
-      plugins: [nodePolyfills({ include: ['crypto', 'http'] }), inject({ Buffer: ['Buffer', 'Buffer'] })]
+      plugins: [
+        nodePolyfills({ include: ['crypto', 'http'] }),
+        inject({ Buffer: ['Buffer', 'Buffer'] })
+      ]
     },
     commonjsOptions: {
       transformMixedEsModules: true
     }
   },
   optimizeDeps: {
     exclude: ['@ethersproject/hash', 'wrtc', 'http'],
-    include: [
-      '@web3-onboard/core',
-      'js-sha3',
-      '@ethersproject/bignumber'
-    ],
+    include: ['@web3-onboard/core', 'js-sha3', '@ethersproject/bignumber'],
     esbuildOptions: {
       // Node.js global to browser globalThis
       define: {
         global: 'globalThis'
       },
+      // Enable esbuild polyfill plugins
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          process: true,
+          buffer: true
+        }),
+        NodeModulesPolyfillPlugin()
+      ]
     }
   },
   define: {
     global: 'window'
   }
 }
 
-export default config
+export default config