# \[Archive\] VueJS Vite - production build modal not loading

**URL:** <https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [October 15, 2022, 11:06am UTC](https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333 "2022-10-15T11:06:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [October 15, 2022, 11:06am UTC](https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333/1 "2022-10-15T11:06:27Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **githubdiscussions** on 10/15/2022.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

Hi all,

I am adding the Web3Auth sign in modal to our existing Vue app that is built with [Vite](https://github.com/vitejs/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](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/2X/7/7f7e483a2e5709f248db53b8dad2551f920be609.jpeg)](https://user-images.githubusercontent.com/161528/195982719-9d77dc34-bfe3-4c0f-98fc-5c9af3a25f95.png)

Our code is pretty standard I think. I followed the example Vue code [here](https://github.com/Web3Auth/examples/blob/main/web-modal-sdk/solana/vue-solana-web3auth-example/src/Home.vue).

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\>
\<scripttype=“module”\>
importprocessfrom“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](https://github.com/mwilc0x)  
   
 Check the discussion at: [https://github.com/orgs/Web3Auth/discussions/729](https://github.com/orgs/Web3Auth/discussions/729)

---

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [October 15, 2022, 9:39pm UTC](https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333/2 "2022-10-15T21:39:50Z")

</div>

I found the common issues link with instructions for Vite. [link](https://web3auth.io/docs/troubleshooting/webpack-issues#vitesvelterollup)

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](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/2X/3/3e1a22848a78949f6cedfda61de1fb8c809d22d1.png)](https://user-images.githubusercontent.com/161528/196008564-0bcd877b-2930-468e-a332-0e4775499bd4.png)

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](https://github.com/mwilc0x)

---

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [February 7, 2023, 11:03am UTC](https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333/3 "2023-02-07T11:03:24Z")

</div>

This is fixed further in 4.4.2

  
   
 Originally posted by: [chaitanyapotti](https://github.com/chaitanyapotti)

---

<div class="post-metadata">

**Author:** ![githubdiscussions](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@githubdiscussions](https://builder.metamask.io/u/githubdiscussions)\
**Post date:** [November 5, 2022, 4:07pm UTC](https://builder.metamask.io/t/archive-vuejs-vite-production-build-modal-not-loading/2333/4 "2022-11-05T16:07:40Z")

</div>

Friendly bump

  
   
 Originally posted by: [mwilc0x](https://github.com/mwilc0x)