Production Build Error: Web3auth + Vite + Qwik

#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.
    image

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

Screenshot 2022-11-25 at 11 09 02 AM

In the local build, it is working.
Screenshot 2022-11-25 at 11 13 12 AM

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

vite.config.ts

@qwik-city-plan’],
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
nodePolyfills()
]
},
},
plugins: [
expressAdaptor({
staticGenerate: true,
}),
],
};
});
">
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,
      }),
    ],
  };
});


Originally posted by: reemardelarosa

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