Error: The 'call' property of web3auth is unable to be read due to being undefined during adapter initialization, specifically when the code is built and not in development mode

It appears to be a duplicate of this error related to 'TypeError: Cannot read properties of undefined (reading 'call') on build but not in dev mode, but I am still unable to identify the cause.

I am using Vue/Vite.js app with web3auth installed. The application works as expected when running in dev mode, but encounters an error when run in production mode (build) displaying:

"TypeError: Cannot read properties of undefined (reading 'call')"
and
'error while initializing adapter'
.

The issue arises at the line await web3auth.initModal();

The error output is as follows:

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)
    ... more detailed error logs here ...

Vite.config.js

import { fileURLToPath, URL } from "url";
// Other imports and configurations...
export default defineConfig({
  plugins: [
    // Plugin configurations...
  ],
  resolve: {
    alias: {
      // Alias mappings...
    },
  },
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `@import "./src/assets/base.scss";`,
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
        // ESBuild options...
    }
  },
  build: {
    sourcemap: true,
    rollupOptions: {
        plugins: [
            // Rollup plugin configurations...
        ]
    },
  
}
});

Answer №1

Success! I managed to resolve the issue.

The problem stemmed from a crucial dependency within @web3auth/web3auth not initializing the web3auth modal correctly.

To address this, I created an alias in Vite that directs @web3auth/web3auth to

@web3auth/web3auth/dist/web3auth.umd.min.js
.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS NG-Grid displaying incorrect value for select cell

I'm working on creating a table with a column that needs to be selected based on a value received from the server. The server sends me 4 as the value, but the first option is always selected instead. $scope.lotteryOptions = { data: 'myDa ...

Enhancing User Experience with Cascading Dropdown Menus in MVC 5

I've been working on this project for a few days now, trying to get Cascading Dropdownlists to function properly. I'm having an issue where my State dropdownlist is not populating and no error message is displayed when the Ajax call fails. What c ...

`Slide align center in the bxslider``

I am attempting to create a slider that is centered on the view. The slide in the center should be positioned at the center of the red line(div). This is my attempt: https://fiddle.jshell.net/4xgpgng1/1/ <style> div.bxslider { margin:0 50%; text-al ...

Changes to the model cannot be realized unless $scope.$apply is used

Are there alternative methods to achieve the desired model change without utilizing $scope injection in an Angular "controller as" approach within the given setup? The HTML: <div data-ng-controller="Buildings as vm"> <select data-ng-model="vm. ...

The email input field is not registering the value in the HTML form

There seems to be an issue with the email field in my form. When selecting 'Headteacher' from the drop-down menu, the email input works correctly. However, when choosing 'Primary school teacher', despite entering the details as expected ...

The information is undefined, yet it is being recorded in the console

After retrieving data from the backend, it seems to be undefined when I try to use it. However, I can see the data logged in the console when using console.log. //I attempted to fetch data using axios but encountered a 404 error and received und ...

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

How to bypass CORS restrictions in XMLHttpRequest by manipulating HTTP headers?

Currently experimenting with the (deprecated) Twitter API 1.0 For instance, I am interested in retrieving data from the API utilizing AJAX browser requests on cross-origin web pages. This could be a new tab, a local HTML file, or any established website. ...

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...

Ensure that the React Router DOM only loads a component when necessary

I am facing an issue with my code which is fully functional and very basic: import React from "react"; import ReactDOM from "react-dom"; import {BrowserRouter, Route, Switch} from "react-router-dom"; import Home from "./A ...

What is the process for generating an auto-incrementing button with a *different input field*?

After searching everywhere for a code snippet to add another input bootstrap input group, I finally decided to take matters into my own hands and create one from scratch. And would you believe it worked like a charm! ...

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

Updating a document on Firestore based on a query is a straightforward process that involves first identifying

I'm currently working on a web form page that needs to update input fields into a specific firestore document based on certain conditions. Can anyone provide guidance on how this can be achieved? The initial part where I retrieve the query results se ...

The path referenced in typings is incorrect

I am currently facing an issue with my Typescript library that I am trying to publish on npmjs. It seems like the types file is not being exported correctly. The library has a simple method in the src/index.ts file and typings from src/typings/index.d.ts. ...

Explore the input from multiple users to uncover the word that appears most frequently among them

Hey there (brand new to JavaScript), I am working on a simple program that requires input from multiple users through prompt pop-ups. For example: <script type="text/javascript> var userInput = prompt("Enter your input:"); </script> It&ap ...

Displaying JSON data using Jquery

I am currently trying to fetch a JSON response and display it in a div ... I have written a script for the same script $('select#mes').on('change',function(){ var valor = $(this).val(); var route = "http://localhost/UJOBB/ ...

HTML is being incorrectly rendered by the Express framework

Looking to Use HTML as View Engine in Express? After going through the link, I attempted to start my server with an index.html file on port 8001. However, it failed to render correctly and showed an error in the console: Server Started Error: SyntaxError ...

Why is it that I am unable to properly encode this URL in node.js?

$node querystring = require('querystring') var dict = { 'q': 'what\'s up' }; var url = 'http://google.com/?q=' + querystring.stringify(dict); url = encodeURIComponent(url); console.log(url); Here is the re ...

Creating a static menu icon and implementing a wide dropdown menu in Bootstrap 4

I am facing two major challenges and I am struggling to find solutions for them! Below is the code snippet I am working with: @font-face { font-family: 'yekani'; src: url("../fonts/yekan.ttf"); } @font-face { font-family: 'ye ...

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...