TypeError：无法在构建时读取未定义的属性（读取“调用”），但在初始化适配器时无法读取 web3auth 的开发

Question

This seems like a repeat of TypeError: Cannot read properties of undefined (reading 'call') on build but not dev but I still can't find the issue.

I am running Vue/Vite.js app with web3auth installed. When I run vite in dev mode, it works as it is supposed too but when I run it in production mode (build) it fails with: "TypeError: Cannot read properties of undefined (reading 'call')" 'error while initializing adapter' .

The error starts when I run await web3auth.initModal();

The error output is

web3auth.esm.js:310 TypeError: Cannot read properties of undefined (reading 'call')
    at new e0 (_stream_duplex.js:60:12)
    at new zN (openloginJrpc.esm.js:26:5)
    at new Que (openloginJrpc.esm.js:966:1)
    at DNe.setupStream (openlogin.esm.js:285:31)
    at DNe.init (openlogin.esm.js:280:10)
    at async Promise.all (index 0)
    at async VPt.init (openlogin.esm.js:601:5)
    at async _.init (openloginAdapter.esm.js:103:5)
    at async web3auth.esm.js:301:58
    at async Promise.all (index 2) 'error while initializing adapter'
(anonymous) @ web3auth.esm.js:310
await in (anonymous) (async)
initModal @ web3auth.esm.js:287
await in initModal (async)
(anonymous) @ torusEvmAdapter.esm.js:197
up @ runtime-core.esm-bundler.js:155
Md @ runtime-core.esm-bundler.js:164
t.__weh.t.__weh @ runtime-core.esm-bundler.js:2685
iae @ runtime-core.esm-bundler.js:356
oae @ runtime-core.esm-bundler.js:401
Promise.then (async)
nae @ runtime-core.esm-bundler.js:285
tae @ runtime-core.esm-bundler.js:279
(anonymous) @ runtime-core.esm-bundler.js:5168
W$ @ reactivity.esm-bundler.js:382
Koe @ reactivity.esm-bundler.js:990
(anonymous) @ reactivity.esm-bundler.js:1113
W$ @ reactivity.esm-bundler.js:382
Koe @ reactivity.esm-bundler.js:990
set value @ reactivity.esm-bundler.js:1026
p @ vue-router.esm-bundler.js:3197
(anonymous) @ vue-router.esm-bundler.js:3070
Promise.then (async)
q @ vue-router.esm-bundler.js:3041
R @ vue-router.esm-bundler.js:2969
install @ vue-router.esm-bundler.js:3386
use @ runtime-core.esm-bundler.js:3834
(anonymous) @ main.ts:34

Vite.config.js

import { fileURLToPath, URL } from "url";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { defineConfig } from "vite";
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
import nodePolyfills from "rollup-plugin-polyfill-node";
import builtins from "rollup-plugin-node-builtins";
import inject from "@rollup/plugin-inject";

import vue from "@vitejs/plugin-vue";
import vuetify from "@vuetify/vite-plugin";
import svgLoader from "vite-svg-loader";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      defaultImport: "component",
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
    }),
    // inject({
    //   util: "util/",
    // }),
  ],
  // define: {
  //   global: "globalThis",
  // },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      // stream: "stream-browserify",
      // buffer: "buffer"
       // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, 
        // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
        // process and buffer are excluded because already managed
        // by node-globals-polyfill
        process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
        buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
        util: 'rollup-plugin-node-polyfills/polyfills/util',
        sys: 'util',
        events: 'rollup-plugin-node-polyfills/polyfills/events',
        stream: 'rollup-plugin-node-polyfills/polyfills/stream',
        path: 'rollup-plugin-node-polyfills/polyfills/path',
        querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
        // punycode: 'rollup-plugin-node-polyfills/p?olyfills/punycode',
        url: 'rollup-plugin-node-polyfills/polyfills/url',
        // string_decoder:
        //     'rollup-plugin-node-polyfills/polyfills/string-decoder',
        http: 'rollup-plugin-node-polyfills/polyfills/http',
        https: 'rollup-plugin-node-polyfills/polyfills/http',
        os: 'rollup-plugin-node-polyfills/polyfills/os',
        assert: 'rollup-plugin-node-polyfills/polyfills/assert',
        constants: 'rollup-plugin-node-polyfills/polyfills/constants',
        _stream_duplex:
            'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
        _stream_passthrough:
            'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
        _stream_readable:
            'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
        _stream_writable:
            'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
        _stream_transform:
            'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
        timers: 'rollup-plugin-node-polyfills/polyfills/timers',
        console: 'rollup-plugin-node-polyfills/polyfills/console',
        vm: 'rollup-plugin-node-polyfills/polyfills/vm',
        zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
        tty: 'rollup-plugin-node-polyfills/polyfills/tty',
        domain: 'rollup-plugin-node-polyfills/polyfills/domain',

        // "openlogin-jpc": 'openlogin-jrpc/dist/openloginJrpc.umd.min.js',
        // "torus-evm-adapter": "@web3auth/torus-evm-adapter/dist/torus-evm-adapter.umd.min.js",
        // web3auth : "@web3auth/web3auth/dist/web3auth.umd.min.js",
        // openloginAdapter : "openlogin-jrpc/dist/openloginJrpc.umd.min.js",
       // web3: "web3/dist/web3.min.js",

    },
  },
  css: {
    preprocessorOptions: {
      // Import help - https://stackoverflow.com/a/71071183
      sass: {
        additionalData: `@import "./src/assets/base.scss";`,
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
        // Node.js global to browser globalThis
        // define: {
        //     global: 'globalThis'
        // },
        // Enable esbuild polyfill plugins
        plugins: [
            NodeGlobalsPolyfillPlugin({
                buffer: true,
                process: true
            }),
           NodeModulesPolyfillPlugin()
        ]
    }
  },
  build: {
    sourcemap: true,
    rollupOptions: {
  
        plugins: [
            // Enable rollup polyfills plugin
            // used during production bundling
            builtins(),
            rollupNodePolyFill()
        ]
    },
  
}
});

Answer 1

I found the solution!

Some dependency in the @web3auth/web3auth was not inializing web3auth modal correctly.

I aliased vite to point @web3auth/web3auth to @web3auth/web3auth/dist/web3auth.umd.min.js .

...
  resolve: {
    alias: {
     ...
      "@web3auth/web3auth" : '@web3auth/web3auth/dist/web3auth.umd.min.js',
    }
 },
...