search

Web3Auth / web3auth-web

Simple infrastructure that enables Web3 wallets and applications to provide seamless user logins for both mainstream and Web3.0 users.
https://web3auth.io/docs
Other
418 stars 233 forks source link

TypeError: Cannot read properties of undefined (reading 'call') on build but not dev for web3auth 'while initializing adapter' #401

Closed Slyracoon23 closed 1 year ago

Slyracoon23 commented 1 year ago

Describe the bug

I am running Vue3/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();

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

To Reproduce

Steps to reproduce the behavior:

Setup

  1. Setup but vue3/vite.js app with web3auth

Dev test (which works)

  1. yarn run dev
  2. Modal initializing correctly - console no errors

build test (which breaks)

  1. yarn run build
  2. yarn run preivew
  3. check the console - you will see the following errors: "TypeError: Cannot read properties of undefined (reading 'call')"

Expected behavior

Both build and dev should work

Files

vite.config.ts

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

}
});

package.json

{
  "name": "vyrnt",
  "version": "0.0.0",
  "scripts": {
    "build": "vue-tsc --noEmit && vite build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "dev": "vite",
    "preview": "vite preview --port 3000",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
  },
  "dependencies": {
    "@adamdehaven/vue-custom-tooltip": "^2.6.0",
    "@chenfengyuan/vue-number-input": "^2.0.1",
    "@dafcoe/vue-collapsible-panel": "^0.2.0",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
    "@mdi/font": "5.9.55",
    "@rollup/plugin-inject": "^4.0.4",
    "@stripe/stripe-js": "^1.29.0",
    "@vue/cli-service": "^5.0.4",
    "@vuepic/vue-datepicker": "^3.2.1",
    "@web3auth/base": "^1.1.4",
    "@web3auth/core": "^1.1.4",
    "@web3auth/metamask-adapter": "^1.1.4",
    "@web3auth/openlogin-adapter": "^1.1.4",
    "@web3auth/phantom-adapter": "^1.1.4",
    "@web3auth/solana-provider": "^1.1.4",
    "@web3auth/torus-evm-adapter": "^1.1.4",
    "@web3auth/torus-solana-adapter": "^1.1.4",
    "@web3auth/wallet-connect-v1-adapter": "^1.1.4",
    "@web3auth/web3auth": "^1.1.4",
    "axios": "^0.26.1",
    "buffer": "^6.0.3",
    "core-js": "^3.8.3",
    "ethers": "^5.6.4",
    "moment": "^2.29.3",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "onfido-sdk-ui": "^9.0.0-beta.2",
    "pinia": "^2.0.13",
    "roboto-fontface": "*",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-polyfill-node": "^0.10.2",
    "stream-browserify": "^3.0.0",
    "ts-jest": "^27.1.4",
    "v3-infinite-loading": "^1.0.6",
    "vue": "^3.2.33",
    "vue-router": "^4.0.12",
    "vue-toastification": "^2.0.0-rc.5",
    "vue3-google-oauth2": "^1.0.6",
    "vueisotope": "^3.1.2",
    "vuetify": "^3.0.0-beta.6",
    "webfontloader": "^1.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.25",
    "@types/webfontloader": "^1.0.0",
    "@vitejs/plugin-vue": "^2.2.2",
    "@vue/cli-plugin-unit-jest": "^5.0.4",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "@vuetify/vite-plugin": "^1.0.0-alpha.0",
    "assert": "^2.0.0",
    "babel-jest": "^27.0.6",
    "crypto-browserify": "^3.12.0",
    "cypress": "^9.5.0",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-vue": "^8.2.0",
    "https-browserify": "^1.0.0",
    "jest": "^27.0.5",
    "jsdom": "^19.0.0",
    "os-browserify": "^0.3.0",
    "prettier": "^2.5.1",
    "process": "^0.11.10",
    "sass": "^1.49.10",
    "sass-loader": "^12.6.0",
    "start-server-and-test": "^1.14.0",
    "stream-http": "^3.2.0",
    "typescript": "~4.5.5",
    "url": "^0.11.0",
    "vite": "^2.8.4",
    "vite-svg-loader": "^3.2.0",
    "vitest": "^0.5.0",
    "vue-cli-plugin-vuetify": "~2.4.8",
    "vue-tsc": "^0.31.4"
  }
}

Device Info (please complete the following information):

Slyracoon23 commented 1 year ago

A similar issue with vite and web3js is on stack-overflow: https://stackoverflow.com/questions/72035203/typeerror-cannot-read-properties-of-undefined-reading-call-on-build-but-not

Slyracoon23 commented 1 year ago

I solved it! Look at the stackoverflow answer. https://stackoverflow.com/questions/73308254/typeerror-cannot-read-properties-of-undefined-reading-call-on-build-but-not