criber's avatar

Polyfills not working in `prod`-mode

Hey guys,

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

0 likes
1 reply
jlrdw's avatar

I suggest you check mix site issues, many times I've seen solutions there.

1 like

Please or to participate in this conversation.