Striptags NPM导致Webpack / Babel / React ES6编译错误

Question

I am running into a bad compile error running Babel / Webpack on a React / Node app.

The Webpack appears to compile, but UglifyJS is throwing eval errors the second it finishes - like Babel is not compiling the React / ES6 code into ES5 at all.

Here is my webpack config:

const path = require('path');
const webpack = require('webpack');
const WebpackStrip = require('strip-loader');

module.exports = {
  devtool: 'source-map',
  context: path.join(__dirname, './CLIENTSIDE/components'),
  entry: {
     background: ['babel-polyfill', './background'],
     uniqueShare: ['babel-polyfill', './uniqueShare'],
     starRating: ['babel-polyfill', './starRating'],
     testingPage: ['babel-polyfill', './testingPage'],
     style: ['babel-polyfill', './style']
  },
  output: {
    path: path.join(__dirname, 'CLIENTSIDE/static'),
    filename: '[name].js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ mangle: true, sourcemap: false })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, "node_modules"),
        ],
        use: [
          { loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['es2015', 'stage-0', 'react'],
              plugins: ['transform-runtime','transform-decorators-legacy', 'transform-object-assign', 'array-includes']
            }
          },
          { loader: WebpackStrip.loader('debug', 'console.log') }
        ],
      },
      {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

Strangely enough, I have the (almost) EXACT same webpack / babel config running in another app and compiling with zero issues. I even added a few things like babel-polyfill with no luck.

Here is the relevant package.json:

"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-array-includes": "^2.0.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^3.6.0"

The code it is transpiling has been into production mode before, and is now directly causing legacy browsers to break due to the presence of ES6 code (when I remove UglifyJS from Webpack entirely, the code will compile and upload to Heroku just fine. It builds great per the logs. And, on modern browsers like Chrome 60, the thing runs great. But switching to browers that explicitly do NOT support ES6, such as Safari on iOS 9, or old versions of Chrome, breaks down entirely and throws ES6 errors like Uncaught SyntaxError: Use of const in strict mode . So it's clearly not down-compiling to ES5. HELP! )

Answer 1

After many hours of systematically moving through our code and removing individual require() calls, I discovered the root of the problem.

We use an NPM module called striptags - https://www.npmjs.com/package/striptags - to get rid of HTML fragments on certain pieces of copy within the app that is managed from an external CMS.

striptags v3.0.0+ introduces a breaking change that completely removes compatibility with UglifyJS and, hence, prevents our Webpack stack from compiling our code into ES5. (In a sense, @Kryten was right - we removed the striptags package from the other build and opted for a different content management system, where our identical Webpack compiler was working)

From the striptags documentation:

Note: v3+ targets ES6, and is therefore incompatible with the master branch of uglifyjs. You can either:

• use babili, which supports ES6
• use the harmony branch of uglifyjs
• stick with the 2.xx branch

We opted to roll back our version of striptags to v2.2.1 explicitly.