Polyfill 在 IE11 上不起作用，显示 SCRIPT1003 预期“：”

Question

So I was just told by a friend that the site shows a blank page on IE11. I booted up Sauce Labs and I found out from the console the error is as shown in the title ie SCRIPT1003 Expected ":" .

I can't seem to pinpoint what is the exact error but it probably has to do with the polyfill I am using for Laravel Mix called laravel-mix-polyfill here . Any help in this regard will be appreciated.

webpack.mix.js

.polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: {"firefox": "50", "ie": 11}
    });

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@ideal-postcodes/core-node": "^1.3.0",
        "@websanova/vue-auth": "^2.21.15-beta",
        "autosize": "^4.0.2",
        "awesome-phonenumber": "^2.25.0",
        "axios": "^0.19.0",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.2.1",
        "datejs": "^1.0.0-rc3",
        "es6-promise": "^4.2.8",
        "jquery": "^3.4.1",
        "js-cookie": "^2.2.1",
        "laravel-mix": "^4.1.4",
        "laravel-mix-polyfill": "^1.1.0",
        "laravel-vapor": "^0.2.0",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.27",
        "node-sass": "^4.13.0",
        "prettier": "1.19.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.23.7",
        "sass-loader": "^7.3.1",
        "sweetalert2": "^9.4.0",
        "v-calendar": "^1.0.1",
        "vee-validate": "^3.1.1",
        "vue": "^2.6.10",
        "vue-axios": "^2.1.5",
        "vue-friendly-iframe": "^0.17.0",
        "vue-password-strength-meter": "^1.6.1",
        "vue-router": "^3.1.3",
        "vue-scrollto": "^2.17.1",
        "vue-spinner": "^1.0.3",
        "vue-template-compiler": "^2.6.10",
        "vuex": "^3.1.2",
        "zxcvbn": "^4.4.2"
    },
    "dependencies": {
        "array-flat-polyfill": "^1.0.1",
        "calculate-aspect-ratio": "^0.1.3",
        "clear": "^0.1.0",
        "izitoast": "^1.4.0",
        "vue-izitoast": "^1.2.1",
        "vue-notifications": "^1.0.2",
        "vue-sticky-directive": "0.0.10",
        "vue-sweetalert2": "^3.0.1",
        "vue2-dropzone": "^3.6.0"
    }
}

Answer 1

What if you use vue.config.js for bundling config,

insert transpileDependencies:['laravel-mix-polyfill'], this code into yours to To polyfill the suspected dependency.

It works for me