IE11 error: SCRIPT445 Object doesn't support this action

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

[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

[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.