autoloader config inverted?

In docs of ProvidePlugin (https://webpack.js.org/guides/shimming/#provideplugin or https://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin) config schema is:

{
   varName: 'module-name',
   $: 'jquery',
   window.jQuery: 'jquery'
}

In mix docs (https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md) it is inverted. And I can’t understand by viewing the code, why and where is this changed?

The problem with “inverted” syntax that it makes impossible to autoload modules, that don’t support old require() and only support ES6 imports. ProvidePlugin uses require() so you get {default: module} in your variable.

This is solved by this PR: https://github.com/webpack/webpack/pull/3597 and is mentioned in docs. So syntax for ES6 modules should be:

{
   autobind: ['class-autobind', 'default']
}

But this is not working with mix. Any ideas how to handle this?

[barryvdh]

For a (more popuplare) example, Bootstrap 4 needs this for Popper: https://getbootstrap.com/docs/4.0/getting-started/webpack/

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        // In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        ...
      })

So there is currently now way around this, other then using the ProvidePlugin directly? Not sure if this will be necesarry in the future, but otherwise when Laravel ships with Bootstrap 4, might be annoying?

[QWp6t]

It was reversed by mix mostly for cosmetic reasons.

{
  jquery: ['$', 'window.jQuery']
}

// vs

{
  '$': 'jquery',
  'window.jQuery': 'jquery'
}

The first one looks cleaner.

The implementation in mix completely overlooked situations like yours, however. So this is a legit bug.

As a workaround for now you can use mix.webpackConfig().

Example:

mix.webpackConfig({
  plugins: [
    new require('webpack').ProvidePlugin({
      __assign: ['tslib', '__assign'],
      __extends: ['tslib', '__extends'],
    })
  ]
});