Angular app works in Chrome but not in Edge with SCRIPT5022: Expected identifier, string or number

Question

I have a large Angular 9 CLI application, which uses a custom webpack configuration to permit the reference to variables from JSON files into SCSS files.

It works well in Chrome but fails in Edge.

The console trace is roughly the same for the production build that I host in AWS Lamdba + ALB

and the unbundled site (ng serve)

I am puzzled that the Edge devtools locate the issue at position (1,1) in the index file:

This is my custom webpack config:

const merge = require('webpack-merge');
const jsonImporter = require('node-sass-json-importer');

module.exports = function(defaultConfig) {
  // console.log('>>>>> debug default config rules', defaultConfig.module.rules);
  const config = {
    module: {
      rules: [
        {
          test: /\.scss$|\.sass$/,
          use: [
            {
              loader: require.resolve('sass-loader'),
              options: {
                implementation: require('node-sass'),
                sassOptions: {
                  // bootstrap-sass requires a minimum precision of 8
                  precision: 8,
                  importer: jsonImporter(),
                  outputStyle: 'expanded'
                }
              }
            }
          ]
        }
      ]
    }
  };
  return merge(defaultConfig, config);
};

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "*": ["./*", "app/*", "test/*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

my tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "**/*.stories.ts"
  ]
}

my package.json:

{
  "name": "XYZ",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-public": "ng build --configuration=gopub",
    "test": "ng test",
    "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "doc": "node src/scripts/runMarked.js",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@angular/animations": "^9.1.4",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.1.4",
    "@angular/compiler": "^9.1.4",
    "@angular/core": "^9.1.4",
    "@angular/forms": "^9.1.4",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "^9.1.4",
    "@angular/platform-browser-dynamic": "^9.1.4",
    "@angular/router": "^9.1.4",
    "@angular/service-worker": "^10.0.1",
    "@azure/msal-angular": "^1.0.0-beta.5",
    "@material/chips": "^6.0.0",
    "@types/vega": "^3.2.0",
    "d3": "^5.15.0",
    "karma-viewport": "^1.0.5",
    "marked": "^0.8.0",
    "msal": "^1.3.2",
    "ngx-spinner": "^9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "vega": "^5.9.1",
    "vega-embed": "^6.2.2",
    "vega-lite": "^4.12.0",
    "vega-typings": "^0.12.4",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.0.0",
    "@angular-devkit/build-angular": "^0.901.0",
    "@angular/cli": "^9.1.4",
    "@angular/compiler-cli": "^9.1.4",
    "@angular/language-service": "^9.1.4",
    "@babel/core": "^7.10.2",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/angular": "^5.3.19",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "babel-loader": "^8.1.0",
    "codelyzer": "^5.1.2",
    "compression-webpack-plugin": "^3.1.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^2.0.1",
    "minimist": "^1.2.5",
    "ng-mocks": "^9.6.2",
    "node-sass": "^4.14.1",
    "node-sass-json-importer": "^4.1.2",
    "prettier": "1.19.1",
    "protractor": "~5.4.3",
    "terser-webpack-plugin": "^2.3.5",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "~3.7.5"
  }
}

What strategy may I follow to find where the issue actually originates from ?

Answer 1

Such this errors may occur when you misplace comma in case of creating dynamic object. For example you may create an object like below:

var dynamicObject = {
   id: 23,
   isProperty: false,
   name: 'sth',  // <-- redundant comma
}

Creating objects on the fly won't be strongly typed also. The best way is taking advantage of interface or class. You may have such this definition in a part of the entire project, not only the page you get the error.

Another reason could be using a reserved keyword in Internet Explorer or Edge as a key inside a dictionary, So you have to rename it or enclose the key in quotes. For example class is one the reserved ones. Note that both IE and Edge use the same JavaScript engine named Chakra.

Answer 2

Try adding the below code in index.html in head section

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