Laravel-mix: [6*.] mix.js() is not converting ES6 to ES5

[pryley]

• Laravel Mix Version: 6.0.0-beta.11 (npm list --depth=0)
• Node Version (node -v): 14.13.0
• NPM Version (npm -v): 6.14.8
• OS: macOS 10.15.7 (Catalina)

Description:

Arrow functions (and possibly other ES6 features) are not being converted to ES5.

With v5, the output of mix.js() starts with this:
!function(t){var i={};function n(s){

With v6, the output of mix.js() starts with this:
(()=>{var t={20:(t,e,i)=>{"use strict";function s(t){

Steps To Reproduce:

Here is my webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
const postCss = namespace => {
  return [
    require('postcss-import'),
    require('precss')(),
    require('postcss-calc')({preserve: false}),
    require('postcss-hexrgba'),
    require('postcss-custom-properties')({preserve: false}),
    require('./+/postcss/postcss-selector-namespaces')({namespace: namespace}),
    require('autoprefixer'),
  ];
};

require('laravel-mix-bundle-analyzer');

mix.babelConfig({
  plugins: [
    ['prismjs', {
        'languages': ['javascript', 'php', 'html', 'css'],
        'plugins': ['line-numbers'],
        'css': false,
    }],
  ],
  presets: [
    "@wordpress/default",
  ],
});

mix.disableSuccessNotifications();

mix.options({
  clearConsole: false,
  cssNano: {
    minifyFontValues: false,
    discardComments: {removeAll: true},
    zindex: false,
  },
  hmrOptions: {
    host: 'localhost',
    port: 3000,
  },
  processCssUrls: false,
  purifyCss: false,
  terser: {
    terserOptions: {
      compress: {
        drop_console: mix.inProduction(),
      },
      mangle: {
        properties: {regex: /[a-zA-Z]+_$/},
      },
    },
  },
});

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, '+/scripts/')},
    modules: ['node_modules'],
  },
});

mix
  .babel('+/scripts/mce-plugin.js', 'assets/scripts/mce-plugin.js')
  .js('+/scripts/plugin.js', 'assets/scripts/plugin.js')
  .js('+/scripts/plugin-admin.js', 'assets/scripts/plugin-admin.js')
  .js('+/scripts/plugin-blocks.js', 'assets/scripts/plugin-blocks.js')
  .sass('+/styles/admin.scss', 'assets/styles/admin')
  .postCss('+/styles/default.css', 'assets/styles', postCss('.style-default'))
  .postCss('+/styles/minimal.css', 'assets/styles', postCss('.style-minimal'))

if (mix.inProduction()) {
  mix.bundleAnalyzer();
}

And here is my package.js file

{
  "dependencies": {
    "prismjs": "^1.22.0",
  },
  "devDependencies": {
    "@babel/compat-data": "^7.12.1",
    "@wordpress/babel-preset-default": "^4.19.0",
    "babel-plugin-prismjs": "^2.0.1",
    "browser-sync": "^2.26.13",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^7.0.2",
    "gulp": "^4.0.2",
    "gulp-bump": "^3.2.0",
    "gulp-checktextdomain": "^2.2.2",
    "gulp-potomo": "^1.1.0",
    "gulp-pottopo": "^1.0.1",
    "gulp-sort": "^2.0.0",
    "gulp-wp-pot": "^2.5.0",
    "imports-loader": "^1.2.0",
    "laravel-mix": "next",
    "laravel-mix-bundle-analyzer": "^1.0.5",
    "npm-check": "^5.9.2",
    "postcss-calc": "^7.0.5",
    "postcss-custom-properties": "^10.0.0",
    "postcss-hexrgba": "^2.0.1",
    "postcss-import": "^12.0.1",
    "precss": "^4.0.0",
    "pump": "^3.0.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "vue-template-compiler": "^2.6.12",
    "yamljs": "^0.3.0",
    "yargs": "^16.1.0"
  },
  "peerDependencies": {
    "postcss": "^8.1.4"
  },
  "private": true,
  "scripts": {
    "build": "gulp && npm run production",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
  }
}

[JeffreyWay]

Can you break your mix file down to the smallest set of reproducible steps?

[thecrypticace]

Also a question: Is it only some ES6 or all ES6 (including code you wrote?) babel-loader is configured (even in Mix v5) to not transpile dependencies in node_modules. I ran into this problem recently with something that had arrow functions baked into it's main minified JS file (D3 Geo in this case).

[kinglozzer]

@thecrypticace I had that same problem in the past and used this as a workaround: https://github.com/JeffreyWay/laravel-mix/issues/1906#issuecomment-455241790. Are you aware of a better approach? I’m looking to start upgrading projects to 6.x soon so will almost certainly run into the same issue!

[pryley]

@JeffreyWay Sorry for the delayed response, I've been out of action for the last few weeks.

1. I removed all dependencies from the package.json except for "laravel-mix": "next", (and any dependencies that laravel mix adds after running npm install).

2. I reduced the mix file down to this:

const mix = require('laravel-mix')

mix.webpackConfig({
  resolve: {
    alias: {'@': path.resolve(__dirname, '+/scripts/')},
    modules: ['node_modules'],
  },
})

mix.js('+/scripts/main.js', 'assets/scripts')

1. And I made a barebones javascript example:

main.js

import Test from '@/test.js'

document.addEventListener('DOMContentLoaded', () => {
    window.TEST = new Test();
})

test.js

const Test = () => {
    this.hello();
}
Test.prototype = {
    hello: () => 'hello',
}
export default Test

This is the result:

(()=>{"use strict";var n=void 0,o=function(){n.hello()};o.prototype={hello:function(){return"hello"}};const t=o;document.addEventListener("DOMContentLoaded",(function(){window.TEST=new t}))})();

As you can see, the minified result starts with (()=>{ instead of (function(){. It also still contains const in the output.

This is with Laravel Mix v6.0.0-beta.14.

[pryley]

Also a question: Is it only some ES6 or all ES6 (including code you wrote?) babel-loader is configured (even in Mix v5) to not transpile dependencies in node_modules. I ran into this problem recently with something that had arrow functions baked into it's main minified JS file (D3 Geo in this case).

It happens with all the ES6 files I write (unsure about the dependencies in node_modules).

I think the issue is related to imports.

[3zzy]

Having the same issue, arrow function is not transpiled causing errors in IE11

[loilo]

@pryley

This is not an issue with Laravel Mix itself. This should be solved if you declare your target browsers by adding a browserslist configuration (e.g. in a .browserslistrc file).

---

While Babel's preset-env is configured in a way that it applies all transforms if no targets list is provided, other parts of Mix' toolchain behave differently. The wrapping arrow function you see in your result is not created by Babel (which only transforms your actual source files) but by webpack itself.

This different interpretation of the absence of a concrete targets list is the reason you see parts of your code transpiled to ES5 and others staying ES2015+. Good news is: just like Babel, webpack will recognize the browserslist configuration and adjujst its wrapper code accordingly.

[thecrypticace]

We should definitely add a note to the Mix documentation for this.

[loilo]

Yep. Possibly even spit out a warning message in the CLI if no target list is provided.

It would be even easier for users if Mix would just set a default baseline targets list if no configuration is found. Not sure though if this is easily possible. webpack and Babel could be easily configured by Mix, but there may be other tools somewhere inside the build chain relying on the browserslist config — and who knows what behavior those fall back to without an explicit browserslist config. ¯\_(ツ)_/¯

[thecrypticace]

So, question, do you know if webpack not honoring the default browserslist config if it's not specified?

npx browserslist says IE 11 is included in a new project w/ Mix v6.

[pryley]

Adding the following to my package.json fixes the problem. With this in mind, I'm assuming that webpack is not honoring the default config (@thecrypticace).

json "browserslist": [ "IE 11" ],

[loilo]

@thecrypticace Exactly. The default browserslist includes IE11, but webpack does not transpile to ES5 without an explicit browserslist. Which is why I concluded webpack did not use the default browserslist config either.

...which means we have Babel as well as webpack diverging from the browserslist default list. We could feed them both a browser list, but we still probably don't know which other tools are looking for a .browserslistrc file or a browserlist entry in the package.json.

So setting a baseline on Mix' side might work in 98% of cases, which means we'd probably still need some kind of note about this in the docs or somewhere. 😁

[pryley]

So setting a baseline on Mix' side might work in 98% of cases, which means we'd probably still need some kind of note about this in the docs or somewhere. 😁

@JeffreyWay ☝🏼

I will close this issue now since it's solved.

[thecrypticace]

Browserslist loadConfig consults a BROWSERSLIST env var. We could detect a browser list and use it otherwise set the env var to "defaults". That's kind of annoying to have to do though. Not sure if there's a better way.

[wouter2203]

Can we reopen this issue until either of the proposed fixes is actually applied?

I just ran into this issue and it took me a while to get here, a note or a sensible default would have been a lot quicker :-)! And until that time, having an open issue also helps other people who are not searching through the closed ones.

[JackWH]

Just to throw this into the mix (heh), you can also resolve this issue using the target property:

When multiple targets are passed, then common subset of features will be used.
webpack will generate a runtime code for web platform and will use only ES5 features.

mix.webpackConfig({
    target: ['web, 'es5'],
});

[flora8984461]

Hi, I ran into a similar issue, I'm using Laravel mix v6, and I set my babel config with:

            "presets":[
                [
                   "@babel/preset-env",
                   {
                      "useBuiltIns":"usage",
                      "corejs": 3,
                      "targets":{
                         "ie":"11"
                      }
                   }
                ]
            ]

And I added browserlist: "browserslist": "last 5 version, > 0.2%, not dead, IE 11" in package.json.

While after compiling with mix.babel() or mix.js(), the polyfill is not added into my js. I still got an error on IE from : Object doesn't support property or method 'forEach', Object doesn't support property or method 'includes', Object doesn't support property or method 'find'.

Actually, I also confused why there is no mix.babel() on the documentation? Does mix.js() already cover all the work of mix.babel() ?

Any help is appreciated! 🙏

[pryley]

@flora8984461

See:

https://github.com/JeffreyWay/laravel-mix/issues/2592#issuecomment-742664080
https://github.com/JeffreyWay/laravel-mix/issues/2592#issuecomment-742635697
https://github.com/JeffreyWay/laravel-mix/issues/2592#issuecomment-764718160

[flora8984461]

@flora8984461

See:

#2592 (comment)
#2592 (comment)
#2592 (comment)

Thanks a lot for your quick help. I have tried with those settings, still not working for me. It confuses me a lot.

[pryley]

This is how I am doing it in the webpack.mix.js file: