Skip to content

UglifyJS fails with Unexpected Token when using babel-preset-env #5897

@itsjavi

Description

@itsjavi

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
I was using webpack 3.8.1 with the UglifyJS plugin and babel-preset-es2015.
Then migrated to babel-preset-env but when the UglifyJS plugin is processing I get this error:

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: game.min.js from UglifyJs
Unexpected token: name (is_electron) [game.min.js:30772,4]

If the current behavior is a bug, please provide the steps to reproduce.
Install the mentioned library versions and try to apply the webpack UglifyJS plugin with minimize: true (or false, it does not matter).

What is the expected behavior?
To work out of the box with babel presets. To not have to add extra configuration to webpack.
Adding a query to the module solves the issue, but a not advanced user will not know this:

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            require.resolve('babel-preset-env')
          ]
        }
      }

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack 3.8.1
babel-cli 6.26.0
babel-loader 7.1.2
babel-preset-env 1.6.1
gulp 3.9.1
webpack-stream 4.0.0
.babelrc:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": "60"
        }
      }
    ]
  ]
}

Activity

itsjavi

itsjavi commented on Oct 28, 2017

@itsjavi
Author

This is my webpack.config.js

const path = require('path');
const webpack = require('webpack');

let webpackShimConfig = {
  // shim config for incompatible libraries
  shim: {
    'melonjs': {
      exports: 'me'
    }
  }
};

module.exports = {
  entry: {
    "game": './src/index.js',
    "game.min": './src/index.js',
  },
  output: {
    filename: '[name].js'
  },
  resolve: {
    modules: [
      path.resolve('./'),
      path.resolve('./src'),
      path.resolve('./node_modules')
    ],
    alias: {
      'melonjs': path.join(__dirname, 'node_modules/melonjs/build/melonjs.js'),
      'melonjs-debug': path.join(__dirname, 'node_modules/melonjs/plugins/debug/debugPanel.js'),
    },
  },
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: 'shim-loader',
        query: webpackShimConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            require.resolve('babel-preset-env')
          ]
        }
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/,
      minimize: true
    })
  ]
};
michael-ciniawsky

michael-ciniawsky commented on Oct 29, 2017

@michael-ciniawsky
Member

@itsjavi The current version of uglifyjs-webpack-plugin (v0.4.6) supports ES5 only, so in case your targets for babel-preset-env allow some ES2015+ features, minification may fail. Install the latest version of uglifyjs-webpack-plugin which fully supports ES2015+ manually until webpack 4 ships with it by default.

npm i -D uglifyjs-webpack-plugin

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const config = {
   plugins: [
     new UglifyJSPlugin({ ...options, ...uglifyOptions })
   ]
}

⚠️ See the README for options

added a commit that references this issue on Mar 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @itsjavi@sokra@michael-ciniawsky

        Issue actions

          UglifyJS fails with Unexpected Token when using babel-preset-env · Issue #5897 · webpack/webpack