javascript - IE11 throw Expected identifier SCRIPT1010 on vendor.js in WEBPACK VAR INJECTION

Question

I have issue with Expected identifier ERROR code: SCRIPT1010 which points on vendor.js in WEBPACK VAR INJECTION section. Debugger points on line with:

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

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"
    ]
  }
}

polyfils:

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

index.html:

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

What shoud I do to fix that? Please for hints and comments, thanks!

Edit, ethereum service which is using problematic web3 lib, which had in dependency 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> {
    // return this.contract.methods.getDocumentIdWithContentHash(hash).then(result => console.log(result));
    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 it will help.

Edit II

keccak in hash.js looks like:

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

You need to import the es6 polyfills :

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

In my app for example, I have :

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/object';
import 'core-js/es7/array';