Vue/Vite构建Web3Auth项目时初始化适配器报TypeError: Cannot read 'call'

问题概述 #

Vue/Vite.js项目集成Web3Auth后，开发模式运行正常，但生产构建后调用await web3auth.initModal();时抛出错误：
TypeError: Cannot read properties of undefined (reading 'call')，附带提示error while initializing adapter，错误栈指向_stream_duplex.js等文件。

错误日志 #

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()
        ]
    },
  
}
});

解决方案 #

问题根源是生产构建时Node.js核心模块的polyfill未正确加载，导致_stream_duplex等依赖缺失。按以下步骤修复：

1. 安装必要的polyfill依赖 #

npm install stream-browserify buffer process util

2. 修改vite.config.js配置 #

简化polyfill配置，确保开发和生产环境一致加载浏览器兼容的Node模块：

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

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

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({ defaultImport: "component" }),
    vuetify({ autoImport: true }),
    inject({
      Buffer: ['buffer', 'Buffer'],
      process: 'process'
    })
  ],
  define: {
    global: "globalThis"
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      stream: "stream-browserify",
      buffer: "buffer",
      process: "process/browser",
      util: "util"
    },
  },
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `@import "./src/assets/base.scss";`,
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
          process: true
        })
      ]
    }
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      plugins: [
        rollupNodePolyFill()
      ]
    }
  }
});

3. 验证Web3Auth初始化代码 #

确保适配器配置正确，且在组件挂载完成后调用初始化：

import { Web3Auth } from "@web3auth/web3auth";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { TorusEvmAdapter } from "@web3auth/torus-evm-adapter";

const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: "testnet",
  chainConfig: {
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth"
  }
});

// 配置适配器
const openloginAdapter = new OpenloginAdapter();
web3auth.configureAdapter(openloginAdapter);

const torusEvmAdapter = new TorusEvmAdapter();
web3auth.configureAdapter(torusEvmAdapter);

// 在组件挂载后执行初始化
async function initWeb3Auth() {
  try {
    await web3auth.initModal();
  } catch (error) {
    console.error("Web3Auth初始化失败:", error);
  }
}

内容的提问来源于stack exchange，提问作者Earl Potters