search

scottcharlesworth / laravel-mix-polyfill

A Laravel Mix extension to include polyfills by using Babel, core-js, and regenerator-runtime
MIT License
50 stars 7 forks source link

IE11 not working using the following code #24

Closed aligajani closed 4 years ago

aligajani commented 4 years ago

Using "laravel-mix-polyfill": "^1.1.0",

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

Error in IE SCRIPT1003 Expected ':'

scottcharlesworth commented 4 years ago

Can you try using version "^2.0.0" and see if that changes anything?

aligajani commented 4 years ago

Thanks @scottcharlesworth . Still same error.

scottcharlesworth commented 4 years ago

Can you run the development script (npm run dev/yarn dev) to find the issue in the uncompressed code and post that snippet here?

aligajani commented 4 years ago

@scottcharlesworth Sure, please see the screenshot below

image

scottcharlesworth commented 4 years ago

@aligajani I can see the issue is in the compiled vendor.js file. This contains all the vendor libraries copied from the node_modules or bower_components folders. Everything in these folders is excluded from Babel processing by default, so will not be polyfilled.

Can you try overriding the default settings with something like:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(bower_components)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: Config.babel()
                    }
                ]
            }
        ]
    }
});
aligajani commented 4 years ago

@scottcharlesworth Thanks, so I just need this and not anything else? Btw, I use node_modules

scottcharlesworth commented 4 years ago

The above mix.webpackConfig() method should remove node_modules from being excluded (and therefore include it in being processed by Babel). This is in addition everything you already have in your webpack.mix.js.

Give it a try and let me know the results.

aligajani commented 4 years ago

@scottcharlesworth

Got warning:

WARNING in ./resources/js/pages/profile/ProfileEdit.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/babel-loader/lib??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/profile/ProfileEdit.vue?vue&type=script&lang=js&) 316:16-26
"export 'default' (imported as 'DatePicker') was not found in 'v-calendar/lib/components/date-picker.umd'
 @ ./resources/js/pages/profile/ProfileEdit.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/profile/ProfileEdit.vue
 @ ./resources/js/router/ProfileRoutes.js
 @ ./resources/js/routes.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/theme/scss/theme.scss

WARNING in ./resources/js/pages/aml/submission/AMLSubmissionForm.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/babel-loader/lib??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/aml/submission/AMLSubmissionForm.vue?vue&type=script&lang=js&) 229:16-26
"export 'default' (imported as 'DatePicker') was not found in 'v-calendar/lib/components/date-picker.umd'
 @ ./resources/js/pages/aml/submission/AMLSubmissionForm.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/aml/submission/AMLSubmissionForm.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/babel-loader/lib??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/pages/aml/submission/AMLSubmissionIndex.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/aml/submission/AMLSubmissionIndex.vue?vue&type=script&lang=js&
 @ ./resources/js/pages/aml/submission/AMLSubmissionIndex.vue
 @ ./resources/js/router/AMLRoutes.js
 @ ./resources/js/routes.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/theme/scss/theme.scss

My mix file below:

const mix = require('laravel-mix');
require('laravel-mix-polyfill');

// Do magic on the core theme and application files
mix
    .js('resources/js/app.js', 'public/js')
    .extract()
    .sass('resources/theme/scss/theme.scss', 'public/css')
    .scripts([

        // Core Vendor Libraries
        'resources/theme/vendor/jquery/dist/jquery.min.js',
        'resources/theme/vendor/jquery-migrate/dist/jquery-migrate.min.js',
        'resources/theme/vendor/popper.js/dist/umd/popper.min.js',
        'resources/theme/vendor/bootstrap/bootstrap.min.js',
        'resources/theme/vendor/hs-megamenu/src/hs.megamenu.js',
        'resources/theme/vendor/svg-injector/dist/svg-injector.min.js',
        'resources/theme/vendor/custombox/dist/custombox.min.js',
        'resources/theme/vendor/custombox/dist/custombox.legacy.min.js',
        'resources/theme/vendor/flatpickr/dist/flatpickr.min.js',
        'resources/theme/vendor/appear.js',
        'resources/theme/vendor/circles/circles.min.js',
        'resources/theme/vendor/bootstrap-select/dist/js/bootstrap-select.min.js',
        'resources/theme/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js',
        'resources/theme/vendor/player.js/dist/player.js',
        'resources/theme/vendor/ideal-postcodes/postcodes.min.js',

        // Core Front Components
        'resources/theme/js/hs.core.js',
        'resources/theme/js/components/hs.chart-pie.js',
        'resources/theme/js/components/hs.file-attach.js',
        'resources/theme/js/components/hs.focus-state.js',
        'resources/theme/js/components/hs.go-to.js',
        'resources/theme/js/components/hs.hamburgers.js',
        'resources/theme/js/components/hs.header.js',
        'resources/theme/js/components/hs.header-fullscreen.js',
        'resources/theme/js/components/hs.modal-window.js',
        'resources/theme/js/components/hs.onscroll-animation.js',
        'resources/theme/js/components/hs.progress-bar.js',
        'resources/theme/js/components/hs.quantity-counter.js',
        'resources/theme/js/components/hs.range-datepicker.js',
        'resources/theme/js/components/hs.scroll-effect.js',
        'resources/theme/js/components/hs.scroll-nav.js',
        'resources/theme/js/components/hs.selectpicker.js',
        'resources/theme/js/components/hs.malihu-scrollbar.js',
        'resources/theme/js/components/hs.show-animation.js',
        'resources/theme/js/components/hs.sticky-block.js',
        'resources/theme/js/components/hs.svg-injector.js',
        'resources/theme/js/components/hs.toggle-state.js',
        'resources/theme/js/components/hs.unfold.js',
        'resources/theme/js/components/hs.video-player.js',
        'resources/theme/js/theme-custom.js'

    ], 'public/js/theme.js')
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: {"firefox": "50", "ie": 11}
    })
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /(bower_components)/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: Config.babel()
                        }
                    ]
                }
            ]
        }
    });

// Version assets only on npm run prod
if (mix.inProduction()) {
    mix.version();
}

// Refreshing with SSL support
mix.browserSync({
    proxy: 'https://shadow-platform.test',
    host: 'shadow-platform.test',
    open: 'external',
    https: {
        key: "/Users/aligajani/.config/valet/Certificates/shadow-platform.test.key",
        cert: "/Users/aligajani/.config/valet/Certificates/shadow-platform.test.crt"
    }

});
aligajani commented 4 years ago

Okay that fixed it generally, the other issue was with v-calendar and not this library.

Thank you Scott