Polyfills not working in `prod`-mode

cberane commented 3 years ago

We have multiple iPod Touch 4th Generation (with iOS 9.3.5) and wanted to release a new internal VueJS-Based mobile app. All tests worked on newer devices but failed on the old devices. I then found laravel-mix-polyfill as a possible solution.

I have a very unusual situation with laravel-mix 6 and the polyfills:

If I run npm run dev, all scripts are working on iOS 9 (in Safari 9):
If I run npm run prod, Vue.JS won't work

Because of the old iOS version (no upgrade available) I can not debug Safari on Mac OS X Big Sur - so unfortunately there is no error log available. Otherwise I probably just can't get the setup right 😋

The package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "prod": "npm run production",
        "production": "mix --production",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0.3",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.19",
        "laravel-mix-polyfill": "^3.0.1",
        "lodash": "^4.17.21",
        "popper.js": "^1.12",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.8",
        "sass-loader": "^12.1.0",
        "tailwindcss": "^2.1.4",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@tinymce/tinymce-vue": "^3.2.8",
        "@trevoreyre/autocomplete-vue": "^2.2.0",
        "autoprefixer": "^10.2.5",
        "bootstrap-colorpicker": "^3.2.0",
        "bootstrap-vue": "^2.21.2",
        "dayjs": "^1.10.4",
        "echarts": "^4.9.0",
        "editor.md": "^1.5.0",
        "ext-json": "^1.0.1",
        "jquery-ui": "^1.12.1",
        "laravel-echo": "^1.10.0",
        "portal-vue": "^2.1.7",
        "pusher-js": "^7.0.3",
        "stream": "^0.0.2",
        "tinymce": "^5.7.0",
        "v-calendar": "^2.3.2",
        "vue-echarts": "^5.0.0-beta.0",
        "vue-organization-chart": "^1.1.6",
        "vue-router": "^3.5.1",
        "vue-simplemde": "^2.0.0",
        "vuex": "^3.6.2",
        "xml-js": "^1.6.11",
        "zepto": "^1.2.0"
    },
    "browserslist": [
        "defaults",
        "iOS 9"
    ]
}

The webpack.mix.json:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .extract()
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: false
    });

Does anybody have a hint, how to resolve this error?

Thanks in advance. Kind regards,

Cris

ChrissiQ commented 3 years ago

I am also having this issue - my polyfills work fine (I'm trying to polyfill for IE11) in dev mode, but when compiling for prod, they stop working.

ChrissiQ commented 3 years ago

Removing .extract() worked for me - it was the vendor.js file that was not getting polyfills, so if I stop extracting the vendor code, the regular combined bundle works fine. It is a shame not to be able to extract the vendor modules, but for now it's more important for me to be able to polyfill for IE11.

Hopefully this bug gets fixed, but I wanted to share our solution as it might provide more information or help others with the same issue.

cberane commented 3 years ago

On further tests I noticed that removing extract() worked as expected - but still only in dev-mode. Furthermore I completely removed the polyfill and the script still worked in dev-mode. So this could be an issue in laravel-mix, removing some needed script parts while minifying. I will open an issue there 🙂

scottcharlesworth / laravel-mix-polyfill

Polyfills not working in `prod`-mode #38