Quasar: IE11 error: SCRIPT445 Object doesn't support this action

[DarkLite1]

Describe the bug

Our web app runs fine in Google Chrome but not in IE11. It simply displays a blank page although we followed the documentation on the browserlist options within package.json:

  "devDependencies": {
     "@quasar/app": "^2.1.0",
  }
  "browserslist": [
    "defaults",
    "ie 11"
  ]

To Reproduce
Steps to reproduce the behavior:

1. Clone GitHub repo
2. run yarn dev or quasar dev
3. See the error in the console of IE11 with a blank page

SCRIPT438: Object doesn't support property or method 'values' // error in console
Object.values(ENVIRONMENT.resources) // from this code

Expected behavior
Loading the page without issue.

Screenshots

Platform (please complete the following information):
Browsers: IE11

Additional context
A similar issue has been reported here.

Running quasar dev clearly states the browser is supported:

Configured browser support (at least 89.98% of global marketshare):
 · IE >= 11

And running quasar build:

App · Transpiling JS (Babel active) - includes IE11 support
 Transpiled JS..... yes (Babel) - includes IE11 support

[pdanpdan]

Hello. Please fill the issue template.
You specified no version of what you use, and your issue seems to be related to the composition api.

[DarkLite1]

I'm sorry, but I think I did use the issue template correctly. Can you tell me what I'm missing? IMHO it has nothing to do wit the composition api because it works flawless in Google Chrome. I think it has something to do with polyfill . But I'm too much of a newbie to understand it properly.

[ontwikkelfabriek]

If it's not a bug/feature request you should post on the forum to get better support.

Anyways. This can happen if one of your non-quasar dependencies is not IE11 compatible. |Becasue by default the node-packages do not get transpiled and therefore can break Quasars IE11 compatibility. You could start to put @vue/composition-api in the transpileDependencies in the quasar.conf file so it will be transpiled by babel.

See: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build

[DarkLite1]

Thank you for clarifying and the help. This is our package.json:

  "dependencies": {
    "@azure/msal-browser": "^2.1.0",
    "@quasar/extras": "^1.9.5",
    "@vue/apollo-composable": "^4.0.0-alpha.10",
    "@vue/composition-api": "1.0.0-beta.11",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "apollo-link-http": "^1.5.17",
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "env-cmd": "^10.1.0",
    "global": "^4.4.0",
    "graphql": "^15.3.0",
    "graphql-tag": "^2.11.0",
    "quasar": "^1.14.0",
    "vue-i18n": "^8.21.1"
  },
  "devDependencies": {
    "@graphql-codegen/add": "^2.0.1",
    "@graphql-codegen/cli": "^1.17.8",
    "@graphql-codegen/fragment-matcher": "1.17.8",
    "@graphql-codegen/introspection": "1.17.8",
    "@graphql-codegen/typescript": "^1.17.9",
    "@graphql-codegen/typescript-operations": "^1.17.8",
    "@graphql-codegen/typescript-vue-apollo": "^2.0.0",
    "@microsoft/microsoft-graph-types": "^1.20.0",
    "@quasar/app": "^2.1.0",
    "@types/node": "14.10.1",
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "babel-eslint": "^10.0.1",
    "eslint": "7.9.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "4.0.2",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^6.1.2",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.1"
  },
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "browserslist": [
    "defaults",
    "ie 11"
  ]

This is what we've added to quasar.conf.js:

    build: {
      transpileDependencies: ['@vue/composition-api', '@vue/apollo-composable', 'graphql', 'graphql-tag', 'apollo-*'],

It did not solve the issue. We've also noticed that the Microsoft Edge browser can't load the page either:

SCRIPT438: SCRIPT438: Object doesn't support property or method 'flatMap'

[ontwikkelfabriek]

Well that is progress, because it is a different error , so the transpileDependencies did solve a part of the problem.

Still one of your other non-Quasar dependencies in package.json is still causing problems. I would remove them one by one to see which one is the cause of the error. ( or add them all to transpileDependencies, @azure/msal-browser maybe?)

btw i am not sure that 'apollo-*' with the wildcard will work ( doc says it must me in regex format). Just to be sure I would explicitly name them in transpileDependencies.

[DarkLite1]

I'm sorry for the confusion, there's no progress. My last line was just mentioning that we have a similar error for the Edge browser, not that we have another error for IE.

Anyhow, I narrowed it down to the file I wrote myself:

// src\services\auth\authService.ts
const resourceScopes = Object.values(ENVIRONMENT.resources)

This code gets converted to a JavaScript file 'dist\spa\js\app.7c9c73b3.js' still containing var e=Object.values(.... As far as I understand it this method is not supported in IE11.

We're working in a typescript project so that's why I asked @IlCallo first for his opinion on this. Our tsconfig.json file seems to be correct and the package.json file too. But the file authService.ts is not converted correctly to IE compatible JavaScript code.

What are we missing here?

[IlCallo]

You already set target: es5 and that should take care of the correct transpilation.
Maybe this could be caused by you importing that file from a component not marked with lang="ts"?

[DarkLite1]

I have checked and that particular piece of code is only used in that file. I even removed the export statement to make sure it's not possible to consume the function outside the module file. So that must not be it.

When compiling/transpiling the code below with quisar build the file dist\spa\js\app.451b9f8d.js still contains Object.values():

from:

const allScopes = (() => {
  const resourceScopes = Object.values(ENVIRONMENT.resources)
    .flatMap((resource) => resource.scopes)
    .filter((scope) => scope)

  const uniqueSet = new Set([...ENVIRONMENT.scopes.loginRequest, ...resourceScopes])
  return Array.from(uniqueSet)
})()
````
to:
```javascript
var e=Object.values(i["a"].resources).flatMap((function(e){return e.scopes}))

package.json is using the correct version "core-js": "^3.6.5",.

What are we missing here? I believe that flatMap() is also not supported by IE11. It seems to me that typescript is not creating compatible code...

[codenamezjames]

I have found when transpiling to a early version of android some of my dependencies were still too new so i had webpack grab those as well.

If you slap this bad boy in your quasar.config.js file in the extendWebpack (cfg) { function and change those includes to your dependencies that might fix it.

cfg.module.rules.push({
  test: /\.(js|vue)$/,
  include: [
    path.resolve(__dirname, './node_modules/@quasar/extras/mdi-v4'),
    path.resolve(__dirname, './node_modules/@quasar/extras/mdi-v5'),
    path.resolve(__dirname, './node_modules/didyoumean2'),
    path.resolve(__dirname, './node_modules/ansi-styles'),
    path.resolve(__dirname, './node_modules/chalk'),
    path.resolve(__dirname, './node_modules/leven'),
    path.resolve(__dirname, './node_modules/qewd-transform-json'),
    path.resolve(__dirname, './node_modules/svg-path-to-polygons'),
    path.resolve(__dirname, './node_modules/uuid-by-string'),
    path.resolve(__dirname, './node_modules/vmath'),
    path.resolve(__dirname, './node_modules/vuex-persist'),
    path.resolve(__dirname, './node_modules/quasar'),
    path.resolve(__dirname, './node_modules/vue2Dropzone'),
    path.resolve(__dirname, './node_modules/vue-grid-layout')
  ],
  use: [
    {
      loader: 'babel-loader',
      options: {
        compact: false,
        extends: path.resolve(__dirname, './babel.config.js')
      }
    }
  ]
})

the way i figure out what i need to transpile is just running the code and looking in the console and figuring out what libraries are causing the error. its a slow process but it was necessary for it to run

EDIT
However the transpileDependencies is probably doing the same thing for you... I just read that bit of the conversation.

[Petercopter]

I've been frantically debugging a Nuxt/Vue application that was throwing this error:

SCRIPT1010: Expected Identifier

After some Googling and fiddling around, I realized the error was coming from something Apollo related. I tried transpiling the list that @DarkLite1 posted, and right now it appears that graphql is the culprit. Because it's a dependency of a dependency, it was really hard to track that down, so thanks for posting that! Good luck with your polyfills, I wish people would just keep their browsers up to date...

[hawkeye64]

I think we can close this now. If this is still an issue for anyone, please re-open.