Issues with build Web3Auth + Quasar App

Help - Plug n Play PnP Web SDKs
,
1

Hello Web3Auth Community,

I’m encountering issues when run build a Web3Auth-integrated Quasar app. While the build completes successfully, the app throws errors in the browser once deployed.

Details:

  • SDK Version:
    "@web3auth/base": "^9.2.3",
"@web3auth/ethereum-provider": "^9.2.3",
"@web3auth/modal": "^9.2.3",
"@web3auth/wallet-services-plugin": "^9.2.4"
  • Platform:
    • Frontend: Vue 3, Quasar Framework (using Vite)
      quasar… v2.16.8
      @quasar/app-vite… v1.9.4
      vite… v2.9.18
    • Deployment: Vercel

The Issue:

'hexToBuffer' is not exported by node_modules/enc-utils/dist/cjs/index.js, imported by node_modules/@toruslabs/starkware-crypto/dist/lib.esm/key_derivation.js
1: import { mnemonicToSeedSync } from 'bip39';
2: import BN from 'bn.js';
3: import { hexToBuffer, removeHexPrefix, sanitizeBytes, numberToHex, hexToBinary, binaryToNumber } from 'enc-utils';
            ^
4: import { HDKey } from 'ethereum-cryptography/hdkey';
5: import hash from 'hash.js';
Error: 'hexToBuffer' is not exported by node_modules/enc-utils/dist/cjs/index.js, imported by node_modules/@toruslabs/starkware-crypto/dist/lib.esm/key_derivation.js

image

Vite Configuration in Quasar:

extendViteConf(cfg) {
  cfg.plugins = cfg.plugins || [];
  cfg.plugins.push(
    resolve({
      browser: true,
      preferBuiltins: false,
    })
  );
  cfg.plugins.push(
    inject({
      Buffer: ["buffer", "Buffer"],
    })
  );
},

polyfill.js boot file:

import { Buffer } from "buffer";
import inherits from "inherits";
import "core-js/actual";

if (typeof globalThis !== "undefined" && !globalThis.inherits) {
  globalThis.inherits = inherits;
}
if (typeof globalThis !== "undefined" && !globalThis?.Buffer) {
  globalThis.Buffer = Buffer;
}

if (typeof window !== "undefined" && !window?.Buffer) {
  window.Buffer = Buffer;
}

Questions:

  1. Has anyone experienced similar issues when integrating Web3Auth with Quasar using Vite?
  2. Are there any specific configuration changes needed to ensure compatibility between Web3Auth, Vite, and Quasar?

Any insights or suggestions would be highly appreciated!

2

Hi Volodymyr!

Thanks for reaching out. I see you’re having issues with integrating Web3Auth in your Quasar App deployed on Vercel using the PnP Web SDK.

To assist the support team effectively, could you please share the following additional details?

  1. SDK Version Number:
  2. Platform (e.g., web, mobile):
  3. Web3Auth initialization and login code snippets
  4. Any browser console screenshots that highlight the issue

If this issue involves custom authentication, please provide:

  • Verifier Name
  • Method of Login
  • JWKS Endpoint (if applicable)
  • A sample idToken (JWT)

Feel free to add any links or images that you think might help.

Looking forward to your response so we can get this resolved for you!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

3

if downgrade the web3auth version to ^8.1, builds will pass but on stage console error:
TypeError: Class extends value undefined is not a constructor or null

4

i remove rollup plugin for polyfill and start use vite-plugin-node-stdlib-browser, now build pass with new version and works as expected, but when i deploy build pass but on page i see error:
TypeError: Class extends value undefined is not a constructor or null
image

5

Hi @volodymyr.k,

Thanks for the updates. I can help get this working in your Quasar app. Here’s what I’d suggest:

  1. Install dependencies:
npm install vite-plugin-node-stdlib-browser buffer process stream-browserify --save-dev
  1. In your quasar.config.js:
extendViteConf(viteConf) {
  viteConf.plugins = viteConf.plugins || [];
  viteConf.plugins.push(
    require('vite-plugin-node-stdlib-browser')()
  );
}
  1. Make sure your boot file has these polyfills:
import { Buffer } from 'buffer';
import process from 'process';

window.Buffer = Buffer;
window.process = process;
window.global = window;

This should fix the “Class extends” error you’re seeing. Let me know if you need any clarification!