scottcharlesworth / laravel-mix-polyfill Goto Github PK

After running npm run dev the script throws an error in IE. The error is:

Object doesn't support property or method 'entries'

Referencing this line:
return Object.entries(mappedProps).map(function (_ref3) {

This is inherited by a dependency vue2-google-maps.

I removed node_modules from Mix's default exclude option. Here is my webpackConfig:

mix.webpackConfig({
    resolve: {
        symlinks: false
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(bower_components)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: mix.config.babel()
                    }
                ]
            }
        ]
    }
});

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: {"firefox": "50", "ie": 11}
    })
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/pdf.scss', 'public/css')
    .version();

Why is Object.entries not getting polyfilled?

I cannot get this package to compile the dependencies,
I've seen a few posts on getting this to compile dependencies and the solutions seemed to be adding this to webpack.mix.js

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

Originally posted by @scottcharlesworth in #24 (comment)

I have tried this and my node modules are still not being compiled.

I also tried changing exclude: /(bower_components)/, to exclude: /(node_modules)/, but it also didn't work

I'm using:
Laravel Mix 6.0.6
webpack 5.21.2

My complete mix file is below:

const mix = require('laravel-mix');
require('laravel-mix-polyfill');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js(
	'resources/js/dassaultlean/main.js', 'public/js/dassaultlean/dassaultlean.js'
)
.polyfill({
  targets: "defaults, IE 11",
  debug: true
})
.vue()
.postCss('resources/css/dassaultlean/main.css', 'public/css/dassaultlean/dassaultlean.css', [
	require('tailwindcss'),
])
.webpackConfig({
  module: {
    rules: [
      {
        // Matches all PHP or JSON files in `resources/lang` directory.
        test: /resources[\\\/]lang.+\.(php|json)$/,
        loader: 'laravel-localization-loader',
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: Config.babel()
          }
        ]
      }
    ]
  }
});
if (mix.inProduction()) {
    mix.version();
}

The offending code is:
Object.assign in one of the packages

Please can you try help me?

Thanks

I installed via npm install --save laravel-mix-polyfill

// webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: {"ie": 11},
      debug: true,
      corejs: 2, 
   });

// package.json
    "dependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.22.1",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-svg-loader": "^0.12.0",
        "vue-template-compiler": "^2.6.10",
        "laravel-mix-polyfill": "^1.0.2",
        "vue-select": "^3.1.0",
        "vuex": "^3.1.1"
    }

Exceptions when running npm run hot

 ERROR  Failed to compile with 11 errors                                                                                         13:26:31

These dependencies were not found:

* core-js/modules/es6.array.iterator in ./resources/js/QuestionMixin.js
* core-js/modules/es6.function.name in ./resources/js/QuestionMixin.js
* core-js/modules/es6.number.constructor in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/MachineInput.vue?vue&type=script&lang=js&, ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/ProgressBar.vue?vue&type=script&lang=js&
* core-js/modules/es6.object.to-string in ./resources/js/app.js, ./resources/js/QuestionMixin.js
* core-js/modules/es6.regexp.match in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Overview.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./resources/js/app.js, ./resources/js/QuestionMixin.js
* core-js/modules/es7.object.values in ./resources/js/QuestionMixin.js
* core-js/modules/web.dom.iterable in ./resources/js/QuestionMixin.js

To install them, you can run: npm install --save core-js/modules/es6.array.iterator core-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.object.to-string core-js/modules/es6.regexp.match core-js/modules/es6.regexp.to-string core-js/modules/es7.object.values core-js/modules/web.dom.iterable

After adding polyfill method to my chain in webpack.mix.js I am now forced to download vue-template-compiler while npm install/update. I make Laravel project without Vue.js and at start entered php artisan preset none

According to the following documentation, setting the targets options to false should automatically allow .browserslistrc to be picked up; however, that isn't the case.

Setting to false will also allow use of browserslist config sources (like .browserslistrc). See here and here for more information.

Installed versions:

• laravel-mix-polyfill: 3.0.0
• laravel-mix: 6.0.11
• webpack: 5.20.2
• @babel/core: 7.12.13

.browserslistrc:

[modern]
last 1 chrome version
last 1 firefox version

[production]
last 1 versions
> 1%
not dead

Command being executed:

mix --production && cross-env BROWSERSLIST_ENV=modern mix --production

The only way I'm able to get it to work is if I do the following to manually set the targets:

const { BROWSERSLIST_ENV, NODE_ENV } = process.env
const browserslistEnv = BROWSERSLIST_ENV || NODE_ENV
const browsersListConfig = readConfig(path.resolve(__dirname, `.browserslistrc`))
const browsersList = browsersListConfig[browserslistEnv] || browsersListConfig.defaults || []

mix.polyfill({
  targets: browsersList.join(', '),
})

My guess is that it might have something to do with the cacheDirectory only being set if debug is enabled.

Why am I getting this error when building? I am using Laravel Mix 4.0. I have ran npm install --save core-js@2.

These dependencies were not found:

• core-js/modules/es6.number.constructor in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!../vue2-heropatterns/src/patterns/Pattern.vue?vue&type=script&lang=js&
• core-js/modules/es6.regexp.replace in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!../vue2-heropatterns/src/patterns/Pattern.vue?vue&type=script&lang=js&
• core-js/modules/es6.symbol in ../object-to-formdata/index.js
• core-js/modules/es7.symbol.async-iterator in ../object-to-formdata/index.js

Here in my webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
.polyfill({
    enabled: true,
    useBuiltIns: "usage",
    targets: {"firefox": "50", "ie": 11}
})
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/pdf.scss', 'public/css')
.version();

And .babelrc:

{
"presets": [
   [
     "@babel/preset-env", {
     "targets": {
       "browsers": ["IE 11, last 2 versions"]
     }
   }
   ]
 ]
}

This package's latest version has a peer dependency on laravel-mix": "^4.0.0. So npm always warns when using with laravel-mix >=v5.0.0. As far as I see everything is running fine, so you might just update the dependency.
Or are there any potential problems?

Laravel Mix has "basic Typescript support", but there are not examples included here using ts() in the webpack.mix.js configuration file.

So do you know if this package is compatible with Typescript? Especially with the default configuration that is shipped with Laravel Mix?

Any way to run node_modules packages through this?

It seems that it doesn't support mix 6.
would you support it please?

https://babeljs.io/docs/en/babel-polyfill

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

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

Laravel Mix Version: 1.0
Node Version: v10.15.1
NPM Version: 6.9.0
OS: window 7

mix.extend('polyfill', new Polyfill());
^

TypeError: mix.extend is not a function

Hi

Both the production as well as the development build fail with the following error:

ERROR in ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] src\js\app.js: Invalid Option: corejs is not a valid top-level option.
        Maybe you meant to use 'targets'? (While processing: "node_modules\\@babel\\preset-env\\lib\\index.js")

I cannot extract more details, even with debug: true the output remains the same. The call looks like this:

mix.js(
  'src/js/app.js', 'dist/js/app.js'
).polyfill({
  enabled: true,
  useBuiltIns: 'usage',
  targets: '>= 0.5%, IE >=11'
})

Any idea what's going on?
Thank you!

Hi, I was wondering if there's a way to extract polyfills from bundled code.

This way the bundled file will be smaller and if I build polyfills for (e.g.) IE11 I can import polyfills.js only when I use that browser.

I.e.:

if (window.hasOwnProperty('ActiveXObject')) { // I'm using IE11 so append polyfills
    var head = document.getElementsByTagName('head')[0];
    var js = document.createElement("script");

    js.type = "application/javascript";
    js.src = "polyfills.js";

    head.appendChild(js);
}

I got this error today after installing this, any chance someone might know how to fix it?

The file in the stacktrace looks to be in my application, but it was working prior to installing:

module.exports = {
    methods: {
        numeral(value, format) {
            return numeral(value).format(format);
        },

        currency(amount) {
            return numeral(amount).format("$0,0.00");
        }
    }
};

I currently have my webpack setup like this:

const mix = require('laravel-mix')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
// const Targets  Plugin = require('targets-webpack-plugin')
require('laravel-mix-polyfill')

mix.js('resources/js/app.js', 'public/js')
  .browserSync({
    proxy: 'localhost:8000'
  })
  .webpackConfig({
    plugins: [
      new VuetifyLoaderPlugin({
        progressiveImages: true,
        sharp: true
      }),
      // new TargetsPlugin({
      //   browsers: ['last 2 versions', 'chrome >= 41', 'IE 11']
      // }),
      new BundleAnalyzerPlugin()
    ],
    module: {
      rules: [
        {
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          test: /\.(js|jvue)?$/
        }
      ]
    }
  })
  .polyfill({
    enabled: true,
    targets: '> 0.25%, not dead',
    corejs: 3,
    useBuiltIns: 'usage',
    entryPoints: 'all',
    debug: true
  })

if (mix.inProduction()) {
  mix.version()
}

Notice that I also installed the targets-webpack-plugin. When I use that package my application works in Edge. I don't want to use that package because it feels a bit cumbersome to do so. So I commented out that code and thought I could use the built-in targets option. With this current setup it doesn't work anymore in Edge. I also created a .browserlistrc file with the following content:

> 0.25%
not dead  

But that doesn't seem to work either. Can someone help me with setting the right settings in polyfill. I want my application to work in Safari and Edge. It works perfectly in the latest versions of Firefox and Chrome.

mix.extend('polyfill', new Polyfill());

show error when command run " npm run watch "

webpack.mix.js :

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

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": 11}
});

So I've developed an app using Laravel and Vue, and trying to get it backwards compatible with IE (11) but not having much luck.

It seems that mix-polyfill is adding the correct polyfills however IE is still not rendering the app due to the follwing error.

Is there something else that I am missing?

package.json
devDependencies
"laravel-mix": "^4.0.7",
"laravel-mix-polyfill": "^1.1.0",

dependencies
"@babel/core": "^7.5.5",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",

webpack.mix.js

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

mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.polyfill({
enabled: true,
debug: true,
useBuiltIns: "usage",
targets: { firefox: "50", ie: 11 }
});

Debug output
Using targets:
{
"firefox": "50",
"ie": "11"
}

Using modules transform: auto

Using plugins:
transform-template-literals { "ie":"11" }
transform-literals { "firefox":"50", "ie":"11" }
transform-function-name { "firefox":"50", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "firefox":"50", "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-dotall-regex { "firefox":"50", "ie":"11" }
transform-unicode-regex { "ie":"11" }
transform-spread { "ie":"11" }
transform-parameters { "firefox":"50", "ie":"11" }
transform-destructuring { "firefox":"50", "ie":"11" }
transform-block-scoping { "firefox":"50", "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "firefox":"50", "ie":"11" }
transform-exponentiation-operator { "firefox":"50", "ie":"11" }
transform-async-to-generator { "firefox":"50", "ie":"11" }
proposal-async-generator-functions { "firefox":"50", "ie":"11" }
proposal-object-rest-spread { "firefox":"50", "ie":"11" }
proposal-unicode-property-regex { "firefox":"50", "ie":"11" }
proposal-json-strings { "firefox":"50", "ie":"11" }
proposal-optional-catch-binding { "firefox":"50", "ie":"11" }
transform-named-capturing-groups-regex { "firefox":"50", "ie":"11" }

Using polyfills with usage option:

[C:\xampp\htdocs\locateourhome\resources\js\app.js] Based on your code and targets, core-js polyfills were not added. 10% building 4/6 modules 2 active C:\xampp\htdocs\locateourhome\node_modules\babel-loader\lib\index.js??ref--4-0!C:\xampp\htdocs\locateourhome\resources\js\routes.js
[C:\xampp\htdocs\locateourhome\resources\js\routes.js] Based on your code and targets, core-js polyfills were not 10% building 8/13 modules 5 active C:\xampp\htdocs\locateourhome\node_modules\babel-loader\lib\index.js??ref--4-0!C:\xampp\htdocs\locateourhome\resources\js\components\mixins\GlobalFunctions.js
[C:\xampp\htdocs\locateourhome\resources\js\bootstrap.js] Based on your code and targ 11% building 9/13 modules 4 active C:\xampp\htdocs\locateourhome\node_modules\babel-loader\lib\index.js??ref--4-0!C:\xampp\htdocs\locateourhome\resources\js\components\mixins\GlobalFunctions.js[C:\xampp\htdocs\locateourhome\resources\js\helpers\httpInterceptor.js] Added following core-js polyfills:
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.promise { "ie":"11" } 11% building 10/13 modules 3 active C:\xampp\htdocs\locateourhome\node_modules\babel-loader\lib\index.js??ref--4-0!C:\xampp\htdocs\locateourhome\resources\js\components\mixins\GlobalFunctions.js
[C:\xampp\htdocs\locateourhome\resources\js\store.js] Based on your code and targets 11% building 11/14 modules 3 active C:\xampp\htdocs\locateourhome\node_modules\vue\dist\vue.common.dev.js
[C:\xampp\htdocs\locateourhome\resources\js\components\mixins\GlobalFunctions.js] Added following core-js polyfills:
es6.regexp.replace { "ie":"11" }
es6.regexp.constructor { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.regexp.to-string { "ie":"11" }
es6.promise { "ie":"11" }
es6.symbol { "firefox":"50", "ie":"11" }
es7.symbol.async-iterator { "firefox":"50", "ie":"11" } 26% building 141/166 modules 25 active ...me\resources\js\components\Auth\ForgotPasswordComponent.vue?vue&type=script&lang=js&
[C:\xampp\htdocs\locateourhome\resources\js\components\PropertyRequests\PropertyRequestSummaryComponent.vue] Added following core-js polyfill:
es6.array.find-index { "ie":"11" }

[C:\xampp\htdocs\locateourhome\resources\js\components\PropertyRequests\PropertyRequestMatchComponent.vue] Based on your code and targets, core-js polyf 27% building 142/167 modules 25 active ...me\resources\js\components\Auth\ForgotPasswordComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\PropertyRequests\PropertyRequestCreateComponent.vue] Added following core-js polyfills:
es6.object.keys { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.array.iterator { "ie":"11" }
web.dom.iterable { "firefox":"50", "ie":"11" }
es6.array.find { "ie":"11" }
es6.symbol { "firefox":"50", "ie":"11" }
es7.object.get-own-property-descriptors { "ie":"11" } 27% building 143/168 modules 25 active ...me\resources\js\components\Auth\ForgotPasswordComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Homes\HomeSummaryComponent.vue] Added following core-js polyfills:
es6.array.find-index { "ie":"11" }
es6.regexp.replace { "ie":"11" }

[C:\xampp\htdocs\locateourhome\resources\js\components\Homes\HomeCreateComponent.vue] Added following core-js polyfills:
es6.object.keys { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.array.iterator { "ie":"11" }
web.dom.iterable { "firefox":"50", "ie":"11" }
es6.array.from { "ie":"11" }
es6.string.iterator { "ie":"11" }
es6.string.includes { "ie":"11" }
es7.array.includes { "ie":"11" }
es6.promise { "ie":"11" }
es6.array.find { "ie":"11" }
es6.symbol { "firefox":"50", "ie":"11" }
es7.object.get-own-property-descriptors { "ie":"11" } 27% building 144/169 modules 25 active ...me\resources\js\components\Auth\ForgotPasswordComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Auth\ResetPasswordComponent.vue] Based on your code and targets, core-js polyfills were not added.

[C:\xampp\htdocs\locateourhome\resources\js\components\User\RentalApplicationComponent.vue] Added following core-js polyfills:
es7.array.includes { "ie":"11" }
es6.string.includes { "ie":"11" }
es6.function.name { "ie":"11" }
es6.array.from { "ie":"11" }
es6.string.iterator { "ie":"11" }
es6.regexp.replace { "ie":"11" }
es6.object.keys { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.array.iterator { "ie":"11" }
web.dom.iterable { "firefox":"50", "ie":"11" }
es7.object.values { "ie":"11" }
es6.promise { "ie":"11" }

[C:\xampp\htdocs\locateourhome\resources\js\components\User\RentalApplicationComponent.vue] Based on your code and targets, added regenerator-runtime. 27% building 144/172 modules 28 active ...eourhome\resources\js\components\Auth\RegisterComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Auth\ForgotPasswordComponent.vue] Based on your code and targets, core-js polyfills were not adde 27% building 145/173 modules 28 active ...eourhome\resources\js\components\Auth\RegisterComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Auth\LogoutComponent.vue] Based on your code and targets, core-js polyfills were not added. 27% building 145/174 modules 29 active ...me\resources\js\components\User\PasswordChangeComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Auth\LoginComponent.vue] Based on your code and targets, core-js polyfills were not added.

[C:\xampp\htdocs\locateourhome\resources\js\components\Auth\RegisterComponent.vue] Based on your code and targets, core-js polyfills were not added. 27% building 146/176 modules 30 active ...ourhome\resources\js\components\User\MyDetailsComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\User\PasswordChangeComponent.vue] Based on your code and targets, core-js polyfills were not adde 27% building 147/177 modules 30 active ...ourhome\resources\js\components\User\MyDetailsComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\User\MyDetailsComponent.vue] Based on your code and targets, core-js polyfills were not added. 27% building 147/178 modules 31 active ...eourhome\resources\js\components\User\FeedbackComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\User\FeedbackComponent.vue] Based on your code and targets, core-js polyfills were not added. 27% building 147/179 modules 32 active ...pp\htdocs\locateourhome\resources\js\components\Nav\Nav.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Nav\Nav.vue] Based on your code and targets, core-js polyfills were not added. 66% building 578/610 modules 32 active ...ourhome\resources\js\components\User\DashboardComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\User\DashboardComponent.vue] Based on your code and targets, core-js polyfills were not added. 66% building 580/612 modules 32 active ...eourhome\resources\js\components\Generic\ModalComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Generic\ModalComponent.vue] Based on your code and targets, core-js polyfills were not added. 66% building 582/614 modules 32 active ...rhome\resources\js\components\User\UserDetailsComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\User\UserDetailsComponent.vue] Based on your code and targets, core-js polyfills were not added. 66% building 587/619 modules 32 active ...docs\locateourhome\resources\js\components\AppComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\AppComponent.vue] Added following core-js polyfills:
es6.array.from { "ie":"11" }
es6.string.iterator { "ie":"11" } 67% building 599/624 modules 25 active ...ocateourhome\resources\js\components\Generic\FileUpload.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Generic\FileUpload.vue] Added following core-js polyfills:
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.promise { "ie":"11" }
es6.array.from { "ie":"11" }
es6.string.iterator { "ie":"11" }
es6.function.name { "ie":"11" } 67% building 610/633 modules 23 active ...e\resources\js\components\Generic\FormControlsComponent.vue?vue&type=script&lang=js&[C:\xampp\htdocs\locateourhome\resources\js\components\Generic\FormControlsComponent.vue] Added following core-js polyfill:
es6.array.find-index { "ie":"11" } 67% building 651/678 modules 27 active ...me\resources\js\components\Generic\MapComponent.vue?vue&type=style&index=0&lang=css&[C:\xampp\htdocs\locateourhome\resources\js\components\Generic\MapComponent.vue] Added following core-js polyfills:
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.promise { "ie":"11" } 66% building 666/710 modules 44 active ...\RentalApplicationModal.vue?vue&type=style&index=1&id=6e2c1587&scoped=true&lang=css&[C:\xampp\htdocs\locateourhome\resources\js\components\Homes\RentalApplicationModal.vue] Added following core-js polyfills:
es6.function.name { "ie":"11" }
es6.object.keys { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.array.iterator { "ie":"11" }
web.dom.iterable { "firefox":"50", "ie":"11" } 66% building 685/732 modules 47 active C:\xampp\htdocs\locateourhome\node_modules\core-js\modules_iter-step.js[C:\xampp\htdocs\locateourhome\resources\js\helpers\fileUpload\utils.js] Added following core-js polyfills:
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.promise { "ie":"11" } 66% building 686/732 modules 46 active C:\xampp\htdocs\locateourhome\node_modules\core-js\modules_iter-step.js[C:\xampp\htdocs\locateourhome\resources\js\helpers\fileUpload\file-upload.fake.service.js] Added following core-js polyfills:
es6.function.name { "ie":"11" }
es6.string.iterator { "ie":"11" }
es6.object.to-string { "firefox":"50", "ie":"11" }
es6.array.iterator { "ie":"11" }
web.dom.iterable { "firefox":"50", "ie":"11" }
es6.promise { "ie":"11" }
es6.regexp.split { "ie":"11" }

If you use mix.extract() to extract vendor files polyfills don't seem to apply to the outputted vendors.js file. My specific situation was trying to polyfill the spread operator for legacy edge, no matter what I tried the vendor.js file didn't get the polyfills. Thankfully I was able to just stop using .extract to get around this but that's not ideal.

Hi,

I've tried using .polyfill against the mix.react function. I thought it would work the same way as with mix.js but then I have this error:

Module build failed: Error: Couldn't find preset "@babel/preset-env" relative to directory "/home/romain/Documents/dev/simde/portail/resources/assets/react"

Do you think I just need to install and configure babel/preset-env somewhere? Or does it need a different implementation?

@scottcharlesworth Thank you for creating this.

I have a question though because I can not get it to work properly.

I'm using template literals and classes and with the debug flag, I seems that laravel-mix-polyfill also detects that but the transforms are never applied. However transforms like proposal-async-generator-functions and proposal-object-rest-spread are.

In my webpack.mix.js I have:

mix.js('resources/assets/js/app.js', 'public/js')
  .polyfill({
    enabled: true,
    useBuiltIns: 'usage',
    targets: '> 1%, not IE < 11',
    corejs: 3,
    debug: true
  })

Output:

npm run dev

> @1.6.1 dev /home/dotnet/napp/newPDFViewer
> npm run development


> @1.6.1 development /home/dotnet/napp/newPDFViewer
> cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

Compiling for development
 10% building 1/2 modules 1 active ...newPDFViewer/resources/assets/js/app.js@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "71",
  "edge": "17",
  "firefox": "65",
  "ie": "11",
  "ios": "12",
  "safari": "12",
  "samsung": "8.2"
}

Using modules transform: auto

Using plugins:
  transform-template-literals { "ie":"11", "ios":"12", "safari":"12" }
  transform-literals { "ie":"11" }
  transform-function-name { "edge":"17", "ie":"11" }
  transform-arrow-functions { "ie":"11" }
  transform-classes { "ie":"11" }
  transform-object-super { "ie":"11" }
  transform-shorthand-properties { "ie":"11" }
  transform-duplicate-keys { "ie":"11" }
  transform-computed-properties { "ie":"11" }
  transform-for-of { "ie":"11" }
  transform-sticky-regex { "ie":"11" }
  transform-dotall-regex { "edge":"17", "firefox":"65", "ie":"11" }
  transform-unicode-regex { "ie":"11" }
  transform-spread { "ie":"11" }
  transform-parameters { "edge":"17", "ie":"11" }
  transform-destructuring { "edge":"17", "ie":"11" }
  transform-block-scoping { "ie":"11" }
  transform-typeof-symbol { "ie":"11" }
  transform-new-target { "ie":"11" }
  transform-regenerator { "ie":"11" }
  transform-exponentiation-operator { "ie":"11" }
  transform-async-to-generator { "ie":"11" }
  proposal-async-generator-functions { "edge":"17", "ie":"11" }
  proposal-object-rest-spread { "edge":"17", "ie":"11" }
  proposal-unicode-property-regex { "edge":"17", "firefox":"65", "ie":"11", "samsung":"8.2" }
  proposal-json-strings { "edge":"17", "ie":"11", "samsung":"8.2" }
  proposal-optional-catch-binding { "edge":"17", "ie":"11", "samsung":"8.2" }
  transform-named-capturing-groups-regex { "edge":"17", "firefox":"65", "ie":"11", "samsung":"8.2" }

/***/ "./resources/assets/js/save-warning/index.mjs":
/*!****************************************************!*\
  !*** ./resources/assets/js/save-warning/index.mjs ***!
  \****************************************************/
/*! exports provided: template, Commander */
/***/ (function(__webpack_module__, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "template", function() { return template; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Commander", function() { return Commander; });
const template = `<style>
  .save-warning {
    position: absolute;
    z-index: 100;

    top: 0;
    left: 50%;
    max-height: 50%;
    transform: translateX(-50%);

    opacity: 1;
    transition: 500ms opacity;
  }
  .save-warning__icon {
    height: 20vh;
    width: 100%;
    margin: 0 auto;
  }
  .save-warning__text {
    padding: 1em;
    margin: 0.2em;

    background: #0d1b2a;
    border-radius: 5px;

    color: #f57900;
    font-size: 2.5em;
    text-align: center;
  }
  .save-warning__emphasis {
    display: block;
  }
  .save-warning--hide {
    opacity: 0;
    pointer-events: none;
  }
</style>
<section class="save-warning">
  <img class="save-warning__icon" src="/images/svg/warning.svg">
  <p class="save-warning__text">
    <strong>The PDF will not work if you save this page locally.</strong>
    <em class="save-warning__emphasis">use the download button</em>
  </p>
</section>`

class Invoker {
  constructor (name, seq, action) {
    this.name = name
    this.seq = seq
    this.execute = action
    this.seqNumber = 0
  }

  check (event) {
    const code = this.seq[this.seqNumber].code
    const ctrl = this.seq[this.seqNumber].ctrl || false

    if (
      event.code === code &&
      (event.ctrlKey || event.metaKey) === ctrl
    ) {
      return true
    } else {
      return false
    }
  }

  sequenceMatching (event) {
    if (this.check(event)) {
      if (this.seqNumber === this.seq.length - 1) {
        this.execute(event)
        this.seqNumber = 0
      } else {
        this.seqNumber += 1
      }
    } else {
      this.seqNumber = 0
    }
  }

  matching (event) {
    if (this.check(event)) {
      this.execute(event)
    }
  }
}
// etc.

I have node_modules/@babel/plugin-transform-template-literals etc, so I don't think I'm missing babel modules.

@scottcharlesworth Do you have an idea to what I'm missing or how to debug this?

Any help is greatly appreciated!

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

I did a clean npm install this morning and it seems like es6.array.iterator is no longer in the core-js package.

I'm a bit stuck on how to fix this.

I'm using this package purely to stop IE11 errors - maybe this is a bit overkill for that use case?

I was looking around for some Babel polyfill support in Laravel-Mix, but then I found out I already managed to fix this in another project. You can simply use a .babelrc file and your webpack.mix.js will pick it up. It is supported by default.

Contents of .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ]
}

You can then assign targets using a .browserslistrc file, or just add a "targets":{...} key next to the useBuiltIns key above.

I'm using your library like this:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .polyfill({
        enabled: true,
        useBuiltIns: "usage",
        targets: '> 0.25%, not dead, IE >= 11'
    });

This does not result in an IE11 compatible js code. I'm getting a JS syntax error because the resulting code has ES6 function declarations.

What do I have to do?

Using laravel-mix-polyfill out of the box with just .polyfill() appears to have started displaying a message about not explicitly setting the desired core-js version.

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js
version. Currently, we assume version 2.x when no version is passed. Since this default
version will likely change in future versions of Babel, we recommend explicitly setting
the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the
version specified in your `package.json`'s `dependencies` section. If it doesn't, you
need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

├── [email protected]
├── [email protected]

I am trying to setup polydill for the current project i am working on. I followed the installation steps and getting many errors about not being about to resolve core-js modules. Below is how my mix file looks:

• "laravel-mix-polyfill": "^2.0.0",
• "laravel-mix": "^4.1.4",
• "@babel/polyfill": "^7.10.4",

const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js')
    .polyfill({
        targets: { "ie": 11}
    })

I have not found any solutions online to over come this bug/issue.

Hi there,

after enabling the plugin, I am getting:

SCRIPT5022: Exception thrown and not caught

which refers to

var getterFor = function getterFor(TYPE) {
  return function (it) {
    var state;

    if (!isObject(it) || (state = get(it)).type !== TYPE) {
      throw TypeError('Incompatible receiver, ' + TYPE + ' required');
    }

    return state;
  };
};

This is the web pack.mix.js

const {EnvironmentPlugin} = require ('webpack');
const mix = require ('laravel-mix');
const glob = require ('glob');
const path = require ('path');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
const ChunkRenamePlugin = require ('webpack-chunk-rename-plugin');

require ('laravel-mix-tailwind');
require ('laravel-mix-purgecss');
require('laravel-mix-polyfill');


/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig ({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    plugins: [
        new CleanWebpackPlugin ({
            cleanOnceBeforeBuildPatterns: ['chunks/**/*']
        }),
        new EnvironmentPlugin ({
            BASE_URL: '/'
        }),
        new ChunkRenamePlugin ({
            initialChunksWithEntry: true,
            '/js/app': 'js/main.js',
            '/js/vendor': 'js/vendor.js',
        }),
    ],
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.join (__dirname, 'resources'),
            'node_modules': path.join (__dirname, 'node_modules')
        }
    },
});

mix.js ('resources/js/main.js', 'public/js')
.postCss ('resources/css/app.css', 'public/css')
.tailwind ('./tailwind.config.js')
.polyfill({
    enabled: true,
    useBuiltIns: "entry",
    targets: "> 0.25%, not dead"
})

if (mix.inProduction ()) {
    mix
    .version ()
    .purgeCss ();
}

Any idea why this is happening?

Does this also work with a .browserslistrc file instead of defining the targets directly in the webpack.mix.js config?

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

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

Error in IE SCRIPT1003 Expected ':'

I added it after installation, but ie11 still has problems.

Thanks for the package!

When adding debug: true to the options, I receive the following error in webpack:

[webpack-cli] Error: Unknown option: .cacheDirectory. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. at throwUnknownError (/var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/validation/options.js:135:27) at /var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/validation/options.js:120:5 at Array.forEach (<anonymous>) at validateNested (/var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/validation/options.js:96:21) at validate (/var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/validation/options.js:87:10) at loadPrivatePartialConfig (/var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/partial.js:64:50) at loadPrivatePartialConfig.next (<anonymous>) at Function.<anonymous> (/var/www/dev/dev.local/node_modules/laravel-mix/node_modules/@babel/core/lib/config/partial.js:131:25) at Generator.next (<anonymous>) at evaluateSync (/var/www/dev/dev.local/node_modules/gensync/index.js:251:28) { code: 'BABEL_UNKNOWN_OPTION' }

Usage:

require('laravel-mix-polyfill');
mix.polyfill({
    corejs     : "3.12",
    enabled    : true,
    useBuiltIns: "usage",
    targets    : "> 0.25%, IE 11, not dead",
    // debug      : true
});

If someone could please educate me: if Mix already compiles E6+ down to Vanilla JS, when/why would I need to utilize this extension and use polyfills? Should I be using both to cover all of my bases?