UglifyJs error when building ReactJS app?

Question

React

Hello everyone, I just decided to build production, ran npm run build... and got an error:

ERROR in js/app.js from UglifyJs
Invalid assignment [js/app.js:26191,31]

I got into app.js at line 26191 and see there:

const renderNode = (node, key) => {
  if (node.nodeName === '#text') {
    return node.value;
  }

That is, here is an ES6 arrow function, but after all, the webpack config specifies what needs to be transformed into ES5 using babel:

{
   test: /\.js$/,
   exclude: /node_modules/,
   use: ['babel-loader', 'eslint-loader']
}

Then I started looking for where this code got into the app.js assembly, and it turned out that it was with node_modules (that is, the package was written in ES6)
Well, I thought, maybe it's because I forbade processing (exclude) the node_modules folder?
But if I delete the line (exclude: /node_modules/), then another error will occur, or rather a lot of errors, since ESLint (Standard Style), few packages are written in accordance with the chosen style
. Next, I added a new reles:

{
   test: /\.js/,
   include: /node_modules/,
   use: ['babel-loader']
}

Работает, но меня не покидает мысль, а разве правильно это? обрабатывать все пакеты из node_modules babel'ом? время сборки сильно увеличилось...
Как вы решаете такие проблемы, в частности, когда в продакшн сборку попадают стрелочные функции, да и не только они, а вообще ES6, не говоря уже о ES7 фичах?
Вот ссылка на конфиг webpack

Answer 1

Babel needs to specify the settings (preset) according to which the code will be transpiled.
Documentation for using babel-loader :

{
  test: /\.js$/,
  exclude: /node_modules|/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env']
    }
  }
}

In this case, it is used babel-preset-env, which automatically determines the required polyfills, etc.... Accordingly, it also needs to be included in the application:
or
npm install --save-dev babel-preset-env

Answer 2

This is a bug, unfortunately the latest version of UglifyJs does not support any es6. You either need to translate to the old JS, and if you still don’t want this, install the plugin separately from webpack. Everything worked for me on this version:
"uglifyjs-webpack-plugin": "^0.4.3",

Answer 3

As a result, I added to the production config:

{
   test: /\.js$/,
   exclude: /src/,
   include: /node_modules/,
   use: ['babel-loader']
}

It works, but it's a crutch...