VueJS Vite - production build modal not loading

Hi all,

I am adding the Web3Auth sign in modal to our existing Vue app that is built with Vite.

I have it mostly working in the development environment. It can load the module and I can sign in with social and solana wallets.

But when I compile the build for production and run that, it spins and does not load.



Screen Shot 2022-10-15 at 6 54 43 AM

Our code is pretty standard I think. I followed the example Vue code here.

There were some things I had to work around, like it was asking for NodeJS methods like require, process and Buffer. I am not sure if that is having an effect in the production build. I have not changed much else except that this is running in a Vite build that I think is using Rollup under the hood for bundling.

For those I did some polyfill from the main index.html:

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<script> = window;</script> <script type="module"> import process from "process"; import { Buffer } from "buffer";

window.Buffer = Buffer;
window.process = process;

<script> = window;</script>
<script type=“module”>
import process from “process”;
import { Buffer } from “buffer”;

window.Buffer = Buffer;
window.process = process;

and in the vite.config.js:

build: {
  target: 'es2020',
  commonjsOptions: {
    transformMixedEsModules: true

Also, currently our build is client side only. I was thinking of converting the build to be server side rendered. I don't know if that would solve it.

If anyone has any ideas or has run in to a similar, any suggestion or feedback how can debug is appreciated.

Thank you

Originally posted by: mwilc0x

Check the discussion at:

I found the common issues link with instructions for Vite. link

Replaced the vite config with this and removed the window overrides. It does solve those problems, but there is a require is not defined. We are using Solana wallets.


This will suppress that require warning under build in vite config, but I don't know if that is causing the modal loading to stall:

commonjsOptions: {
  transformMixedEsModules: true

This is what our init code looks like:

const web3auth = new Web3Auth({
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.SOLANA,
    chainId: "0x3",
    rpcTarget: "",

Also, we are currently a client side only build. We want to convert to Nuxt but in our backlog for right now.

Originally posted by: mwilc0x

This is fixed further in 4.4.2

Originally posted by: chaitanyapotti

Friendly bump

Originally posted by: mwilc0x