IE11 is encountering an error with an "Expected identifier" message in the vendor.js file related to Webpack's variable

I encountered an issue with an Expected identifier ERROR code: SCRIPT1010 that is pointing to vendor.js in the WEBPACK VAR INJECTION section. The debugger is highlighting the line with:

const { keccak256, keccak256s } = __webpack_require__(/*! ./hash */ "./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/hash.js");

Here is my tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015.promise",
      "es2018",
      "dom"
    ]
  }
}

Additional polyfills:

import 'classlist.js'
(window as any).__Zone_enable_cross_context_check = true;

Regarding index.html:

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Any advice on what steps I should take to resolve this issue would be greatly appreciated. Thank you!

Edit: The issue arises from an Ethereum service utilizing a problematic web3 library with a dependency on hash.js.

import { Injectable } from '@angular/core';
import Web3 from 'web3';
import { Block } from 'web3-eth';
import { Observable, BehaviorSubject } from 'rxjs';
const abi = require('../abi/abi.json');

export class TrustedDocumentResponse<T> {
  public value: T;
  public errorCode: number;
  public errorMessage: string;

  constructor(value:T, errorCode:number = 0, erroMessage:string = "") {
      this.value = value;
      this.errorCode = errorCode;
      this.errorMessage = erroMessage;
  }
}

@Injectable({
  providedIn: 'root'
})
export class EthereumService {
  web3: Web3;
  contract: any;

  providers = Object.freeze({
    LOCALHOST: 'http://localhost:8546'
  });


  providerSource = new BehaviorSubject<string>(this.providers.INFURA);
  provider$ = this.providerSource.asObservable();

  constructor() {
    this.provider$.subscribe(provider => {
      this.web3 = new Web3(provider);
      console.log('eth sub');

    });

    this.contract = new this.web3.eth.Contract(abi, this.contractAddress);
    console.log('contract', this.contract);

  }

  getBlockTimestamp(blockNumber: number): Promise<Block> {
    return this.web3.eth.getBlock(blockNumber);
  }

  getDocumentIdWithContentHash(hash: string): Promise<any> {
    console.log('serviceHash: ', hash);

    return new Promise<TrustedDocumentResponse<number>>((resolve) => {
      let transactionObject: any = this.contract.methods.getDocumentIdWithContentHash(hash);
      transactionObject.call().then((result) => {
          console.log(result);

          resolve(new TrustedDocumentResponse<number>(result));
      }).catch((reason:Error) => {
          console.error(reason);
          resolve(new TrustedDocumentResponse<number>(null,1,reason.stack));
      });
  });
  }

  getDocument(id: number) {
    this.contract.methods.getDocument(id).then(result => console.log(result));
  }

  convertToBinary(data: any): Uint8Array {
    const index = data.indexOf(';base64,') + 8;
    const raw = window.atob(data.substring(index));

    let array = new Uint8Array(new ArrayBuffer(raw.length));
    for (let i = 0; i < raw.length; i++) {
        array[i] = raw.charCodeAt(i);
    }
    return array;
  }
}

I hope this information proves to be helpful.

Edit II: The keccak function in hash.js is defined as:

const keccak = bits => str => {
  var msg;
  if (str.slice(0, 2) === "0x") {
    msg = [];
    for (var i = 2, l = str.length; i < l; i += 2) msg.push(parseInt(str.slice(i, i + 2), 16));
  } else {
    msg = str;
  }
  return update(Keccak(bits, bits), msg);
};

module.exports = {
  keccak256: keccak(256),
  keccak512: keccak(512),
  keccak256s: keccak(256),
  keccak512s: keccak(512)
};

Answer №1

Make sure to include the necessary es6 polyfills :

import 'core-js/es6/symbol';
import 'core-js/es6/object';

For instance, in the application I am working on, I include the following polyfills for compatibility with IE9, IE10, and IE11 :

/** To ensure compatibility with IE9, IE10, and IE11, all of the following polyfills are required. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** To support NgClass on SVG elements in IE10 and IE11 **/
import 'classlist.js'; // Make sure to run `npm install --save classlist.js`.

/** To enable the Reflect API in IE10 and IE11 **/
import 'core-js/es6/reflect';

/** These polyfills are necessary for evergreen browsers. **/
// Required for reflect-metadata in JIT. For AOT (and Angular decorators only), these can be removed.
import 'core-js/es7/object';
import 'core-js/es7/array';

Answer №2

An issue arises with Internet Explorer because it does not have support for Destructuring assignment.

A solution to this problem is to make the following adjustment:

const { keccak256, keccak256s } = __webpack_require__(/*...*/);

Instead, modify it to:

const hash = __webpack_require__(/*...*/),
    keccak256 = hash.keccak256,
    keccak256s = hash.keccak256s;

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

Variations in jQuery's append method when dealing with a string, a reference to a jQuery object

Here are multiple ways to add a div element to the body of an HTML document. But what distinctions exist between them and in what scenarios should each be utilized for optimal performance? var newDiv = '<div id="divid"></div>'; $(&ap ...

Can a specific element be chosen based on its background color?

Is it possible to change the background color of a child element within a div that has a specific background color using CSS? See my explanation below. For example: .container[background-color=some color] .content { background-color: some other color ...

What is the most effective way to extract the output from a JSONP request and utilize it beyond the

I have a function that is working well. I had to use JSONP to handle cross-domain issues, and I also wrote an HTTP module to change the content-type. However, I did not include a callback name in the URL. function AddSecurityCode(securityCode, token) { va ...

connect a column from a separate array in pdfmake

In my current project, I am looking to link the values of an array that is different from the one present in the initial two columns. Is this achievable? (The number of partialPrice values aligns with the number of code entries). Despite several attempts ...

Ways to update the content of a NodeList

When I execute this code in the console: document.querySelectorAll("a.pointer[title='Average']") It fetches a collection of Averages, each with displayed text on the page: <a class="pointer" title="Average" onclick="showScoretab(this)"> ...

Trigger useEffect when the page is loaded - using React

I utilize react-admin to fetch content from my API. I've added a button to minimize text length in order to keep the table cells at a reasonable height and maintain a clean, easy-to-read table. https://i.sstatic.net/tjNt6.png https://i.sstatic.net/2 ...

having trouble retrieving the values of the current item during a submit event

When working with a JSON array of objects that are bound to an HTML form and a mat-expansion-panel view, I encountered an issue where I couldn't retrieve the updated value of the name input field. No matter what I tried, it always returned the initial ...

What is the process for transmitting an array of objects from Angular to a Web API Core using HttpGet?

In my TypeScript file, I have an array of objects called PropertiesParams: const PropertiesParams = [{ Name: 'FirstName', Filter: 'Like1' }, { Name: 'LastName', Filter: 'Like2' }, { Name: ...

Can you explain how to utilize a function on a client component in Next.js?

I'm a bit lost on how client components function. I am working on an image uploader project where I need to extract the userId from supabase, utilize the supabase server function, and then upload the image to supabase storage with the "userId/filename ...

Discovering the 3D coordinates of a point that is perpendicular to the midpoint of a line

(I am working with Javascript/Typescript and Three.js) Given two vectors, let's say {x:1, y:3, z:5} and {x:7, y:8, z:10}, I have a direct straight line connecting them. At the midpoint of this line, envision a disc with a radius of 1 that is perpend ...

The action is undefined and cannot be read for the property type

Using the React+Redux framework, I encountered an error: https://i.sstatic.net/0yqjl.png During debugging, the server data successfully reached the state, but the action was empty: https://i.sstatic.net/41VgJ.png Highlighted below is a snippet of my co ...

ngx-translate is failing to display any text within a lazily-loaded module

We are currently utilizing Angular 6 within our application and have recently initiated the process of preparing our app for lazy-loading. Our application consists of multiple lazy-loaded routes, and our goal is to utilize a single language file for all ro ...

Is it possible to await the response of a request in Socket.io with socket.on('answerToRequest')?

Can the following scenario work out? async function checkSocketStatus(){ socket.emit('checkOtherSocketStatus', otherSocketId); await socket.on('responseCheckSocketStatus', (status)=>{ console.log('status'); } ...

unable to retrieve / interpret data from herdsmen using fetch

When sending a request to a node server, the server responds with headers and a blank body. Despite being able to view the headers in the network activity panel within dev-tools, I faced difficulties reading them using the following code: let uploaded ...

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

The inference of optional generic types is not occurring

I need help addressing a type error in my TypeScript wrapper for handling NextJS API requests. Specifically, I am facing an issue when trying to pass a single type for one of the generic types in the function. To illustrate this error, I have created a si ...

Printing error stack that includes the source from the source map

I've been trying to take advantage of the native support for source maps in Node, but I'm having trouble getting them to work when printing errors to the console. Despite running node with --enable-source-maps and using the source-map-support pa ...

Establishing the preset values for Material-UI toggle button group

I utilized the Material UI library to implement a button toggle widget for selecting options. Check out my codesandbox project here - https://codesandbox.io/s/50pl0jy3xk The user can interact by choosing a membership type: adult, child, or infant. Option ...

Adding a JSON file to an Angular app hosted on a Grunt server

I'm currently following a beginner's guide for Angular and I need to incorporate a JSON file into my project. I started off by using Yeoman to set up my application, which is running on grunt. var phonecatApp = angular.module('phonecatApp& ...

ngInfiniteScroll Activates on Every Scroll Occurrence

Implementing ngInfiniteScroll for endless scrolling on my website has required me to set the height of the outer div to a specific value. Without this adjustment, the Infinite Scroll feature activates unintentionally. <div style="height: 1px"> &l ...