Laravel-mix: How to modify babel-preset-env configuration?

[morrislaptop]

• Laravel Mix Version: 1.4.2
• Node Version (node -v): v8.4.0
• NPM Version (npm -v): 5.3.0
• OS: Mac

Description:

In src/config.js there is:

        babel: function () {
            let options = {};

            tap(Mix.paths.root('.babelrc'), babelrc => {
                if (File.exists(babelrc)) {
                    options = JSON.parse(File.find(babelrc).read());
                }
            });

            let defaultOptions = {
                cacheDirectory: true,
                presets: [
                    ['env', {
                        'modules': false,
                        'targets': {
                            'browsers': ['> 2%'],
                            uglify: true
                        }
                    }]
                ]
            };

            if (this.react) {
                defaultOptions.presets.push('react');
            }

            return webpackMerge.smart(defaultOptions, options);
        },

Steps To Reproduce:

In my .babelrc I have

{
  "presets": [
    ["env", {
        "targets": {
            "browsers": ["> 5%"],
            "uglify": false
        }
    }]
  ]
}

However, this is just concatenating this as another 'env' preset and it isn't being used. How can I modify the original env preset?

[bungcip]

I also have same issue as you. My workaround is basically like this:
1) copy src/config.js to laravelmixworkaround.js in root folder with commented code in preset options:

            let defaultOptions = {
                cacheDirectory: true,
                // presets: [
                //     ['env', {
                //         'modules': false,
                //         'targets': {
                //             'browsers': ['> 2%'],
                //             uglify: true
                //         }
                //     }]
                // ]
            };

2) in your package.json add the following code:

{
   ...
   "scripts": {
    "postinstall": "shx cp laravelmixworkaround.js node_modules/laravel-mix/src/config.js"
  },
  "devDependencies": {
     ...
    "shx": "^0.2.2",
  },

}

now every time you run npm install, src/config.js will be replaced with laravelmixworkaround.js

[morrislaptop]

That looks gross :p I've moved to https://poi.js.org/#/

[bungcip]

yeah, it gross. but this is what happen when you try to write .babelrc then found it not working. I wasted 2 hours just to find out that laravel-mix is the culprit. webpack configuration is already complex enough to handle. adding laravel-mix bug on top of that is just causing headache. In the end, I don't have enough energy to write proper solution + pull request. So this fragile solution is the best workaround for now -_-;

[JeffreyWay]

You can't modify that part at the moment, but we can try to update the merge strategy to allow for it.

[atomita]

Example of update the merge strategy.

let _ = require('lodash'),
    webpackMerge = require('webpack-merge'),
    smart = webpackMerge.smart;

webpackMerge.smart = function(a, b) {
    var r = smart.call(webpackMerge, a, b);

    if (! b.presets) {
        return r;
    }

    let i = _.findIndex(b.presets, [0, 'env']);
    if (i < 0) {
        return r;
    }

    let j = _.findIndex(r.presets, [0, 'env']);
    if (j < 0) {
        j = r.presets.length;
        r.presets.push(['env']);
    }

    r.presets[j][1] = _.defaults({}, b.presets[i][1] || {}, r.presets[j][1] || {});

    return r;
};

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

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

[darrena092]

This essentially makes Laravel Mix no longer useful for my case as it seems to not be transpiling for IE11 now which clients are still requesting support for. IMO this feature should be pretty high priority - there will always be edge cases where the > 2% target is not appropriate.

[aphofstede]

See https://github.com/JeffreyWay/laravel-mix/issues/1861