Laravel-mix: autoloader config inverted?

[terion-name]

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?

[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'],
    })
  ]
});

[JeffreyWay]

Well it's only inverted for the Mix API. What we pass to the ProvidePlugin is the non-inverted form, right?

[QWp6t]

Correct. It's passed correctly to webpack. So I guess in that sense, it's not actually a bug.

[terion-name]

well, the problem is that it is impossible to autoload a named export via mix api

[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?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.