Unable to get package to compile other dependencies

[roarkmccolgan]

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 https://github.com/scottcharlesworth/laravel-mix-polyfill/issues/24#issuecomment-627839745

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

[scottcharlesworth]

@roarkmccolgan I think since I wrote that code example, the way that Laravel Mix has changed - probably due to a change in Webpack.

If you add .dump() to the end of your chain, the Webpack config will be outputted to the console. You will see that all the snippet does now is to append to the module.rules array.

I think what you want to do is to change the excluded folders of a particular rule. The rule for JavaScript is generated here.

.override() seems to be the solution.

mix.override(webpackConfig => {
    let javascriptIndex = null;

    webpackConfig.module.rules.forEach(function (value, index) {
        if (value['test'].toString() === '/\\.(cjs|mjs|jsx?|tsx?)$/') {
            javascriptIndex = index;
        }
    });

    if (javascriptIndex) {
        delete webpackConfig.module.rules[javascriptIndex]['exclude'];
    }
})

That said, this won't just cause Laravel Mix and this plugin to polyfill the missing features, but to recompile the package from source. This could cause issues.

Give it a try and let me know.

[regularmike]

@scottcharlesworth this approach worked great for my needs, thanks! Instead of including everything I just wanted to include a single package from node_modules, and potentially more later, so I have an array of transpiledNodeModules and then reassign exclude to the following:

new RegExp('(node_modules\\/(?!(' + transpiledNodeModules.join('|') + ')\\/).*|bower_components)')

I'm somewhat surprised that there is not an easier way to do this out of the box with Mix.