Polyfill targets not working as expected

[basvandinther]

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.

[basvandinther]

I am currently using version 2.0.0 of laravel-mix-polyfill.

[scottcharlesworth]

@basvandinther points to note:

• Laravel Mix Extensions were not supported until version 2.1.0, and
• this package has a peer dependency of laravel-mix version 4 or 5

but I'll try to help.

It's possible this extension is not doing anything as your version of Mix is too old. If possible I'd update to the latest version of Mix (which can be done regardless of the Laravel PHP framework you're using).

Looking at your new browserlist string I can see that Edge 18 & some Safari versions are supported. But the original string you used in the TargetsPlugin targeted significantly more browsers.

Can you try changing the polyfill() targets to: 'last 2 versions, chrome >= 41, IE 11' and see what the result is?

[basvandinther]

@scottcharlesworth thanks for your reply and detailed answer. I will take a look at it as soon as I am at home and post the results here.

[basvandinther]

@scottcharlesworth I changed the targets but still got the following error in Edge: SCRIPT1028: Expected identifier, string or number

[scottcharlesworth]

@basvandinther can you run the development script (npm run dev/yarn dev) then try with IE again and look at the line that's generating the error?

Is it your code or part of a vendor library?

[basvandinther]

@scottcharlesworth I believe it breaks on this piece of code:

    classes() {
      const classes = { ..._VSheet__WEBPACK_IMPORTED_MODULE_1__["default"].options.computed.classes.call(this),
        'v-alert--border': Boolean(this.border),
        'v-alert--dense': this.dense,
        'v-alert--outlined': this.outlined,
        'v-alert--prominent': this.prominent,
        'v-alert--text': this.text
      };

I believe this is part of Vuetify. I found the following solution which is to add this code to my vue.config.js file:

module.exports = {
  transpileDependencies: ['vuetify']
}

However.. I don't know how this works within a Laravel project so i'll do some research. If i find an answer I will post it here.

Is it possible to transpile dependencies in webpack?

[scottcharlesworth]

@basvandinther the contents of node_modules (vendor library) is excluded by default. See my answer here for more details.

You can try overriding the default Webpack config by adding this to your webpack.mix.js:

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

Let me know the result.

[basvandinther]

This worked, thank you very very much for your time! The final version of webpack looks like this:

const mix = require('laravel-mix')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const VuetifyLoaderPlugin = require('vuetify-loader/lib/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 BundleAnalyzerPlugin()
    ],
    module: {
      rules: [
        {
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          test: /\.(js|jvue)?$/
        },
        {
          test: /\.jsx?$/,
          exclude: /(bower_components)/,
          use: [
            {
              loader: 'babel-loader',
              options: Config.babel()
            }
          ]
        }
      ]
    }
  })
  .polyfill({
    enabled: true,
    targets: 'last 2 versions, chrome >= 41, IE 11',
    corejs: 3,
    useBuiltIns: 'usage',
    debug: true
  })

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