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 ?

Do you have any const { someProperty, ...rest } = something ? Edge is not supporting it. — nevzatopcu
– nevzatopcu, Commented Jun 27, 2020 at 21:03
Does this answer your question? Problem with Angular website on Edge only: SCRIPT5022 expected identifier string or number — Roy
– Roy, Commented Jun 27, 2020 at 21:44
Can you please inform us which exact version of the MS Edge legacy browser you are using for making this test? If you are testing with the older version then make a test with the latest version to see whether it helps to fix the issue. Check whether you are importing the PolymerElement.js in your project or not. I found in another thread that it is causing a similar error in the Edge browser. — Deepak-MSFT
– Deepak-MSFT, Commented Jun 29, 2020 at 3:06
According to this, error code SCRIPT5022 related to a js exception. Maybe it will help someone. My wild guess it could be the bundle target is not compatible with Edge. — Aboodz
– Aboodz, Commented Jul 21, 2020 at 18:48
Its also worth checking any 3rd party packages you are using, and their compatibility. It could be one of them does not have IE support. — cjd82187
– cjd82187, Commented Jul 23, 2020 at 18:11

Srishti Khandelwal · Accepted Answer · 2020-07-20 09:14:16Z

2

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

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

answered Jul 20, 2020 at 9:14

Srishti Khandelwal

5774 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BuZz Over a year ago

Thanks for your tip - unfortunately this doesn't have any effect

Amirhossein Mehrvarzi · Accepted Answer · 2020-07-26 07:45:37Z

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.

edited Jul 26, 2020 at 7:45

answered Jul 23, 2020 at 10:39

Amirhossein Mehrvarzi

19.1k7 gold badges52 silver badges74 bronze badges

1 Comment

BuZz Over a year ago

I've come across a few blogs detailing those possible issues. I checked already and don't have the "comma" issue, nor am I using any reserved words inappropriately

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related