diff --git a/examples/with-vanilla-js/index.html b/examples/with-vanilla-js/index.html
index e53e87e43..c65454442 100644
--- a/examples/with-vanilla-js/index.html
+++ b/examples/with-vanilla-js/index.html
@@ -4,7 +4,8 @@
@web3-onboard with vanilla js
-
+
+
diff --git a/examples/with-vanilla-js/package.json b/examples/with-vanilla-js/package.json
index c001151ee..1651146ef 100644
--- a/examples/with-vanilla-js/package.json
+++ b/examples/with-vanilla-js/package.json
@@ -10,8 +10,18 @@
"author": "",
"license": "ISC",
"devDependencies": {
+ "assert": "^2.0.0",
+ "buffer": "^6.0.3",
+ "crypto-browserify": "^3.12.0",
"css-loader": "^6.7.3",
+ "https-browserify": "^1.0.0",
+ "os-browserify": "^0.3.0",
+ "path-browserify": "^1.0.1",
+ "process": "^0.11.10",
+ "stream-browserify": "^3.0.0",
+ "stream-http": "^3.2.0",
"style-loader": "^3.3.2",
+ "util": "^0.12.5",
"webpack": "^5.79.0",
"webpack-cli": "^5.0.2",
"webpack-dev-server": "^4.13.3"
diff --git a/examples/with-vanilla-js/src/index.js b/examples/with-vanilla-js/src/index.js
index 88f8dbf1c..f7ff6987d 100644
--- a/examples/with-vanilla-js/src/index.js
+++ b/examples/with-vanilla-js/src/index.js
@@ -28,9 +28,9 @@ const addConnectedInfo = connectedAccount => {
$connect.addEventListener('click', async _ => {
const wallets = await connect()
- const connectedAccount = wallets[0].accounts[0]
- label = wallets[0].label
if (wallets[0]) {
+ const connectedAccount = wallets[0].accounts[0]
+ label = wallets[0].label
addConnectedInfo(connectedAccount)
$wallet.classList.remove('hidden')
$disconnected.classList.add('hidden')
diff --git a/examples/with-vanilla-js/webpack.config.js b/examples/with-vanilla-js/webpack.config.js
index 95fed1288..7be6b77cb 100644
--- a/examples/with-vanilla-js/webpack.config.js
+++ b/examples/with-vanilla-js/webpack.config.js
@@ -1,4 +1,5 @@
const path = require('path')
+const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
@@ -7,6 +8,25 @@ module.exports = {
path: path.resolve(__dirname, 'dist'),
clean: true
},
+ resolve: {
+ fallback: {
+ path: require.resolve('path-browserify')
+ },
+ alias: {
+ assert: 'assert',
+ buffer: 'buffer',
+ crypto: 'crypto-browserify',
+ http: 'stream-http',
+ https: 'https-browserify',
+ os: 'os-browserify/browser',
+ process: 'process/browser',
+ stream: 'stream-browserify',
+ util: 'util'
+ }
+ },
+ experiments: {
+ asyncWebAssembly: true
+ },
module: {
rules: [
{
@@ -21,6 +41,12 @@ module.exports = {
}
]
},
+ plugins: [
+ new webpack.ProvidePlugin({
+ process: 'process/browser',
+ Buffer: ['buffer', 'Buffer']
+ })
+ ],
devServer: {
historyApiFallback: true,
static: { directory: path.join(__dirname, '/') },