VueJS Vite - production build modal not loading

[mwilc0x]

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.

Development:

Production:

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:

<script>window.global = window;</script>
<script type="module">
  import process from "process";
  import { Buffer } from "buffer";

  window.Buffer = Buffer;
  window.process = process;
</script>

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

[mwilc0x]

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({
  clientId,
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.SOLANA,
    chainId: "0x3",
    rpcTarget: "https://rpc.ankr.com/solana",
  },
});

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

[mwilc0x]

This is the require that it is breaking on:

https://github.com/torusresearch/solana-embed/blob/5fa5ae37b7e78dafa6ac249209bd6b6d4a2d9fd4/src/embed.ts#L37

I can fix this manually or use that transformMixedEsModules above and it will not break on it. But then the Web3Auth modal will still spin on load and does not seem to initiating for the production build. I followed the Vue/Vite polyfill instructions from the docs. The dev build is fine and is working.

[mwilc0x]

Here is a hosted version: https://smy.ecotokens.net/login

I added the domains to allowlist

[mwilc0x]

Bump

Does anyone have a Vue/Vite prod build working?

[mwilc0x]

Friendly bump

[chaitanyapotti]

Hey.. we just released new version of Web3Auth 3.0.4 which has the fix

[chaitanyapotti]

This is fixed further in 4.4.2