VueJS Vite - production build modal not loading

[Legacy] GitHub Discussions
1

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:

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.global = window;</script> <script type="module"> import process from "process"; import { Buffer } from "buffer";

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

<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



Originally posted by: mwilc0x

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/729
2

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.

image

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.



Originally posted by: mwilc0x
3

This is fixed further in 4.4.2



Originally posted by: chaitanyapotti
4

Friendly bump



Originally posted by: mwilc0x