From 50e1ef5c63d23968a7b4b5cb6e56322c51e9e2ee Mon Sep 17 00:00:00 2001
From: imsys <arthur@life.net.br>
Date: Thu, 27 Jan 2022 01:42:14 -0300
Subject: [PATCH] Settings to use with Vite

Vite is being used as an alternative to Webpack, and it needs some special settings to get it working with Web3Modal.
Adding this to the documentation will help the users.
Those settings were found thanks to @theurgi at https://github.com/blocknative/onboard/issues/762#issuecomment-997246672
---
 README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/README.md b/README.md
index 49b0a48878..758bc780ea 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,37 @@ const provider = new ethers.providers.Web3Provider(instance);
 const signer = provider.getSigner();
 ```
 
+## Using with [Vite](https://github.com/vitejs/vite)
+
+```js
+//vite.config.js
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+const production = process.env.NODE_ENV === 'production';
+
+export default {
+
+  plugins: [
+    // ↓ Needed for development mode
+    !production && nodePolyfills({
+        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')]
+      })
+  ],
+
+  build: {
+    rollupOptions: {
+      plugins: [
+        // ↓ Needed for build
+        nodePolyfills()
+      ]
+    },
+    // ↓ Needed for build if using WalletConnect and other providers
+    commonjsOptions: {
+      transformMixedEsModules: true
+    }
+  }
+}
+```
+
 ## Using in vanilla JavaScript
 
 You can use the modal from the old fashioned web page JavaScript as well.