Production Build Error: Web3auth + Vite + Qwik

[reemardelarosa]

#933

Issue

Buffer is not defined when deployed to production but working in local development.
Applied most of the solutions here but had no luck.
vitejs/vite#2785

Steps to reproduce the behavior:

1. Go to https://wallet.dloyal.com/
2. Open the devtools
3. See the Buffer is not defined error.
4. Signin page is not loading and the website is not usable.
   

Replicated also in stackblitz setup
https://stackblitz.com/edit/qwik-starter-dtpczo?file=adaptors/express/vite.config.ts

1. Wait for the webcontainer to load and dependencies to be installed.
2. run yarn serve
3. Open console and see the Buffer error

In the local build, it is working.

Screen.Recording.2022-11-25.at.10.30.17.AM.mov

Device Info (please complete the following information):

• Device: Mac Book
• OS: IOS
• Browser Chrome
• Version 107.0.5304.110 (Official Build) (arm64)
• Web3Auth Version

 "@web3auth/base": "3.0.4",
 "@web3auth/core": "3.0.4",
 "@web3auth/openlogin-adapter": "3.0.4",

Additional context

For reference

• https://github.com/ionic-team/rollup-plugin-node-polyfills

vite.config.ts

import nodePolyfills from 'rollup-plugin-node-polyfills';
import { expressAdaptor } from '@builder.io/qwik-city/adaptors/express/vite';
import { extendConfig } from '@builder.io/qwik-city/vite';
import baseConfig from '../../vite.config';

export default extendConfig(baseConfig, () => {
  return {
    build: {
      ssr: true,
      rollupOptions: {
        input: ['src/entry.express.tsx', '@qwik-city-plan'],
        plugins: [
          // Enable rollup polyfills plugin
          // used during production bundling
          nodePolyfills()
        ]
      },
    },
    plugins: [
      expressAdaptor({
        staticGenerate: true,
      }),
    ],
  };
});

Tried from related discussion https://github.com/orgs/Web3Auth/discussions/729

export default extendConfig(baseConfig, () => {
  return {
    build: {
      ssr: true,
      target: 'es2020',
      commonjsOptions: {
        transformMixedEsModules: true
      },
      rollupOptions: {
        input: ['src/entry.express.tsx', '@qwik-city-plan'],
      },
    },
    plugins: [
      expressAdaptor({
        staticGenerate: true,
      }),
    ],
  };
});

[reemardelarosa]

Tried similar solution here but got no luck.
https://github.com/orgs/Web3Auth/discussions/729

[chaitanyapotti]

This is fixed in 4.4.2