webpack-contrib / uglifyjs-webpack-plugin

[deprecated] UglifyJS Plugin
MIT License
1.38k stars 179 forks source link

Es6 parsing errors #104

Closed moimael closed 7 years ago

moimael commented 7 years ago

Using the latest beta 2 release, i still can't compile our project with webpack and uglify js. I get a bunch of errors:

ERROR in js/0.e650a1216d2254804644.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/0.e650a1216d2254804644.js:1,22]

ERROR in js/admin_vendor.d2cd47f2483885be1b59.js from UglifyJs
Invalid assignment [js/admin_vendor.d2cd47f2483885be1b59.js:1,39]

ERROR in js/vendor.9a912162b3af71161977.js from UglifyJs
Invalid assignment [js/vendor.9a912162b3af71161977.js:1,25]

ERROR in js/surveys_vendor.494ceefd2361b3728fe8.js from UglifyJs
Invalid assignment [js/surveys_vendor.494ceefd2361b3728fe8.js:1,37]

ERROR in js/checkout_vendor.fb2c911a62751ce67576.js from UglifyJs
Invalid assignment [js/checkout_vendor.fb2c911a62751ce67576.js:1,37]

ERROR in js/graphiql_vendor.c343df2b080b164c48d3.js from UglifyJs
Invalid assignment [js/graphiql_vendor.c343df2b080b164c48d3.js:1,32]

ERROR in js/admin.a93255238f41a7ec1bd7.js from UglifyJs
Unexpected token: punc ()) [js/admin.a93255238f41a7ec1bd7.js:1,655]

ERROR in js/landing-pages_vendor.b54b6beee23eadc55c4b.js from UglifyJs
Invalid assignment [js/landing-pages_vendor.b54b6beee23eadc55c4b.js:1,32]

ERROR in js/venue-portal_vendor.639c04accaf1ba2de574.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/venue-portal_vendor.639c04accaf1ba2de574.js:1,20]

ERROR in js/checkout.4f43f1bd4817898dd7a8.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/checkout.4f43f1bd4817898dd7a8.js:1,20]

ERROR in js/surveys.de2929da2691ffcd0054.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/surveys.de2929da2691ffcd0054.js:1,21]

ERROR in js/landing-pages.e88bd429d81adf8dedfe.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/landing-pages.e88bd429d81adf8dedfe.js:1,21]

ERROR in js/crm_vendor.b47fa1b9209b19c3bdfa.js from UglifyJs
Invalid assignment [js/crm_vendor.b47fa1b9209b19c3bdfa.js:1,33]

ERROR in js/venue-portal.fbdbff3ebf2762fa9a93.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/venue-portal.fbdbff3ebf2762fa9a93.js:1,21]

ERROR in js/brand-pages_vendor.6fad5816b248b665e243.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/brand-pages_vendor.6fad5816b248b665e243.js:1,23]

ERROR in js/brand-pages.941b599481dafc718f0c.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/brand-pages.941b599481dafc718f0c.js:1,21]

ERROR in js/graphiql.3e633a8af08f1d993d35.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/graphiql.3e633a8af08f1d993d35.js:1,21]

ERROR in js/crm.ca6d09aebbc648efc543.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/crm.ca6d09aebbc648efc543.js:1,21]

ERROR in js/manifest.99425849abfda34bc57f.js from UglifyJs
Unexpected token: operator (>) [js/manifest.99425849abfda34bc57f.js:1,3]

I specified the ecma: 8 option. Any idea why this happens ?

Thanks !

izatop commented 7 years ago

I have same error with the equal ecma option.

alexander-akait commented 7 years ago

@moimael thanks for issue, can your create minimum reproducible test repo?

moimael commented 7 years ago

@evilebottnawi Seems really difficult since it's a huge project. But if I decode correctly the errors, the problem is with short function func_name() in classes and arrow functions () =>

alexander-akait commented 7 years ago

@moimael can you provide config (or part of config) where your configure plugin and options, maybe wrong options, without repo difficult to determine where problem :disappointed:

moimael commented 7 years ago

Here you go:

    new UglifyJSPlugin({
      sourceMap: true,
      uglifyOptions: { ecma: 8 },
    })
alexander-akait commented 7 years ago

@moimael okey, let's debug this :+1:

tapesec commented 7 years ago

@moimael same problem here with arrow function in my app.js main file prtscr capture

UglifyJs conf : new UglifyJSPlugin({ parallel: true, uglifyOptions: { ecma: 7 }, beautify: false, sourceMap: true, comments: false }) parallel: true, uglifyOptions: { ecma: 7 }, beautify: false, sourceMap: true, comments: false })

The error : prtscr capture_2

Good job btw :)

moimael commented 7 years ago

Any ideas or workaround ? :)

moimael commented 7 years ago

If i disable the mangle and compress option I get this:

ERROR in js/0.d2f9ef3556cc3dfba988.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-dom/lib/ReactPerf.js:73,0][js/0.d2f9ef3556cc3dfba988.js:1,1554]

ERROR in js/admin_vendor.073ccb6d0ca1c3a894a4.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-intl/lib/index.es.js:110,0][js/admin_vendor.073ccb6d0ca1c3a894a4.js:1,5568]

ERROR in js/vendor.30f8b421226451805c83.js from UglifyJs
Unexpected token: punc (,) [./node_modules/moment/moment.js:1880,0][js/vendor.30f8b421226451805c83.js:6,36604]

ERROR in js/surveys_vendor.424c3d03a21cf0706a86.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-intl/lib/index.es.js:110,0][js/surveys_vendor.424c3d03a21cf0706a86.js:1,5566]

ERROR in js/checkout_vendor.32725348a9b61d3011ea.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-intl/lib/index.es.js:110,0][js/checkout_vendor.32725348a9b61d3011ea.js:1,5566]

ERROR in js/graphiql_vendor.8b8e29ed2a09df95dcfb.js from UglifyJs
Unexpected token: punc (,) [./node_modules/apollo-client/data/storeUtils.js:130,0][js/graphiql_vendor.8b8e29ed2a09df95dcfb.js:1,12732]

ERROR in js/admin.fd65508304406c9bcac0.js from UglifyJs
Unexpected token: punc (,) [./src/shared/higher/pure/index.js:18,0][js/admin.fd65508304406c9bcac0.js:1,4192]

ERROR in js/landing-pages_vendor.f2b99fa611e1b60f1ff7.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-intl/lib/index.es.js:110,0][js/landing-pages_vendor.f2b99fa611e1b60f1ff7.js:1,5561]

ERROR in js/venue-portal_vendor.7bc9fc28f966fa66bfc8.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-apollo/react-apollo.browser.umd.js:116,12][js/venue-portal_vendor.7bc9fc28f966fa66bfc8.js:1,13973]

ERROR in js/checkout.2851077621cc5f728c90.js from UglifyJs
Unexpected token: punc (,) [js/checkout.2851077621cc5f728c90.js:1,1353]

ERROR in js/surveys.78b168a1cfe662bb63da.js from UglifyJs
Unexpected token: punc (,) [js/surveys.78b168a1cfe662bb63da.js:1,1354]

ERROR in js/landing-pages.d025ed168a96d7a46779.js from UglifyJs
Unexpected token: punc (,) [js/landing-pages.d025ed168a96d7a46779.js:1,1354]

ERROR in js/crm_vendor.94c733e996001f5e971e.js from UglifyJs
Unexpected token: punc (,) [./node_modules/apollo-client/data/storeUtils.js:130,0][js/crm_vendor.94c733e996001f5e971e.js:1,12733]

ERROR in js/venue-portal.d4af3319c441e3004983.js from UglifyJs
Unexpected token: punc (,) [js/venue-portal.d4af3319c441e3004983.js:1,1354]

ERROR in js/brand-pages_vendor.ff854aedd8ff4f3a760d.js from UglifyJs
Unexpected token: punc (,) [./node_modules/react-intl/lib/index.es.js:110,0][js/brand-pages_vendor.ff854aedd8ff4f3a760d.js:1,5322]

ERROR in js/brand-pages.826099fb204f8b1f22a1.js from UglifyJs
Unexpected token: punc (,) [js/brand-pages.826099fb204f8b1f22a1.js:1,1354]

ERROR in js/graphiql.f4b07551724834d62840.js from UglifyJs
Unexpected token: punc (,) [js/graphiql.f4b07551724834d62840.js:1,1354]

ERROR in js/crm.6fd313b8d94ade5813d5.js from UglifyJs
Unexpected token: punc (,) [js/crm.6fd313b8d94ade5813d5.js:1,1354]
Marcsimm commented 7 years ago

Any update on this issue? It is preventing deployment.

ambewas commented 7 years ago

Encountering this issue with running webpack -p as well.

Same error:

ERROR in bundle.js from UglifyJs
Unexpected token: punc ()) [./src/js/index.js:13,18][bundle.js:4979,64]
alexander-akait commented 7 years ago

WIP

alexander-akait commented 7 years ago

@ambewas just confirm, your use webpack 3.5.0?

ambewas commented 7 years ago

@evilebottnawi that's correct. I was having the issue with 3.4.1 but just tried with 3.5.0 as well & the error remains

ambewas commented 7 years ago

here's my webpack config, btw:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './src/index.ejs',
    })
  ],
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: [
          "babel-loader",
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|mp4)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

and my dependencies:

  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2016": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "es6-promise": "^4.1.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "gulp-rollup": "^2.14.0",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.0",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "jquery": "^3.2.1",
    "ramda": "^0.24.1"
  }
alexander-akait commented 7 years ago

@moimael @izatop @tapesec @Marcsimm @ambewas do your use webpack.optimize.ModuleConcatenationPlugin ? If yes, please try to disable and test again, thanks!

ambewas commented 7 years ago

@evilebottnawi nope, only these:

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management',
      template: './src/index.ejs',
    })
  ],
alexander-akait commented 7 years ago

@ambewas weird, can your create minimum reproducible test repo?

ambewas commented 7 years ago

@evilebottnawi I'm setting up a small repo right now. But I think I've already gotten a hint to the issue.

I'm importing .mp4 links in my code -- without these, it seems uglify is happy. With them, I get the error.

ambewas commented 7 years ago

@evilebottnawi here's a repo where you can reproduce the issue https://github.com/ambewas/uglify-webpack-build-error

npm start runs fine, npm run bundle (which is basically webpack -p ) fails with the aforementioned error

alexander-akait commented 7 years ago

@ambewas thanks!

alexander-akait commented 7 years ago

Maybe can help somebody: if your use webpack 3.5.0, just update to 3.5.1 (https://github.com/webpack/webpack/pull/5460).

ambewas commented 7 years ago

@evilebottnawi I'm so sorry, but I tried your suggested solution to upgrade to 3.5.1 in the reproduction repo, & I'm still getting the error on npm run bundle (webpack -p)

alexander-akait commented 7 years ago

@ambewas don't worry, i am watching your repo right now.

alexander-akait commented 7 years ago

@ambewas problems in your configuration:

  1. Use this config for babel-loader:
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: "babel-loader",
        }
    },
  2. es2016 babel preset don't contain babel-plugin-transform-es2015-arrow-function (look at https://github.com/babel/babel/blob/master/packages/babel-preset-es2016/package.json#L11), but your use () => {}, just add es2015 preset
    npm install --save-dev babel-preset-es2015
{
    "presets": [
        ["es2015", "es2016"]
    ]
}

Also i recommend use babel-preset-env.

ambewas commented 7 years ago

@evilebottnawi thanks so much -- that works perfectly. Can't believe I overlooked that.

alexander-akait commented 7 years ago

@moimael do your use babel-loader?

moimael commented 7 years ago

Yes I do, but I use babel-preset-env that's why I need to minify es6

alexander-akait commented 7 years ago

@moimael very strange, i create repo based on your information and all work as expected, no warnings and errors, need reproducible repo

pingshunhuangalex commented 7 years ago

Same problem here with babel-preset-env installed, including es2015 didn't solve the problem.

moimael commented 7 years ago

@evilebottnawi Where can I find your repo where you try to reproduce the problem ? I'll take it as a basis to reproduce our issue.

alexander-akait commented 7 years ago

@moimael locally, on my projects @pingshunhuangalex please create minimum reproducible test repo, thanks!

pingshunhuangalex commented 7 years ago

Hi @evilebottnawi

Can you try this repo for issue testing? Just download the project, npm i and npm run build, you'll see the error which points to an ES6 arrow function.

As I mentioned above, I tried all the methods mentioned above, but no luck. Let me know if you find anything. Thanks.

kzc commented 7 years ago

@pingshunhuangalex

The repo provided is using an old version of uglifyjs-webpack-plugin that uses uglify-js which is ES5 only:

https://github.com/shershen08/vue-masonry-plugin-demo/blob/34b213bb6b17130ddc0abde68cdb18294bc281af/package.json#L42

uglifyjs-webpack-plugin@1.0.0-beta.2 uses the ES6+ capable uglify-es module.

The repo's webpack@2.6.1 prod config is also pointing an ES5 only uglify-js webpack uglify plugin:

https://github.com/shershen08/vue-masonry-plugin-demo/blob/34b213bb6b17130ddc0abde68cdb18294bc281af/build/webpack.prod.conf.js#L32

See: https://stackoverflow.com/a/45088328

alexander-akait commented 7 years ago

@moimael friendly ping, can your provide at least webpack config?

moimael commented 7 years ago

Here you go, it's quite big, sorry for that.

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const glob = require('glob');
const capitalize = require('capitalize');
const _ = require('lodash');

/* Webpack plugins */
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

/* PostCSS plugins */
const cssImport = require('postcss-import');
const cssnext = require('postcss-cssnext');
const objectFitImage = require('postcss-object-fit-images');

const defineEnv = require('./define-env');

const production = process.env.NODE_ENV === 'production';

const faviconsHtml = require('./faviconData.json').favicon.html_code;

const hotModuleEntries = production ?
  [] : ['react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server'];

function apps() {
  const files = glob.sync('./src/client/apps/*');
  return _.reduce(files, (sum, file) =>
    Object.assign(sum, {
      [path.basename(file, '.js')]: hotModuleEntries.concat(file),
    }), {});
}

function isVendor({ resource }) {
  return resource &&
    resource.indexOf('node_modules') >= 0 &&
    resource.match(/\.(js|json)$/);
}

const baseConf = {
  entry: apps(),

  output: {
    path: path.join(__dirname, '/public/dist'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        }],
      },
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        query: {
          includePaths: [
            path.resolve(__dirname, 'src/shared/templates/'),
          ],
        },
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        use: ['graphql-tag/loader'],
      },
      {
        test: /\.(eot|otf|svg|ttf|woff|woff2)(\?[\s\S]+)?$/,
        exclude: /node_modules/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash].[ext]',
          },
        }],
        include: path.join(__dirname, 'public', 'fonts'),
      },
    ],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.DefinePlugin(defineEnv()),
    ...Object.keys(apps())
      .map(app => new webpack.optimize.CommonsChunkPlugin({
        name: `${app}_vendor`,
        chunks: [app],
        minChunks: isVendor,
      })),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: Object.keys(apps()).map(n => `${n}_vendor`),
      minChunks: (module, count) => (
        count >= Object.keys(apps()).length && isVendor(module)
      ),
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity,
    }),
    // Make a commonchunk from all duplicated libs in already made commonchunks
    // (meta chunk)
    new webpack.optimize.CommonsChunkPlugin({
      children: true,
      minChunks: 3,
    }),
    ...Object.keys(apps())
      .map(app => new HtmlWebpackPlugin({
        title: `${capitalize(app)} | Universal Avenue`,
        filename: `${app}.html`,
        chunks: ['manifest', 'vendor', `${app}_vendor`, app],
        cache: true,
        inject: false,
        template: path.join(__dirname, 'src', 'shared', 'templates', 'index.ejs'),
        appMountId: 'app',
        mobile: true,
        faviconsHtml,
        meta: [
          {
            'http-equiv': 'Accept-CH',
            content: 'DPR, Viewport-Width, Width',
          },
        ],
        serviceWorker: production ? `/${app}-service-worker.js` : null,
        window: {
          NODE_ENV: process.env.NODE_ENV,
          API_BASE_PATH: process.env.API_BASE_PATH,
          SENTRY_CLIENT_DSN: process.env.SENTRY_CLIENT_DSN,
          STRIPE_PUB_KEY: process.env.STRIPE_PUB_KEY,
          SEGMENT_KEY: process.env.SEGMENT_KEY,
        },
        alwaysWriteToDisk: true,
      })),
    new HtmlWebpackHarddiskPlugin(),
  ],

  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.json', '.js'],
  },

  node: {
    __dirname: true,
    fs: 'empty',
  },
};

const devConf = merge.smart(baseConf, {
  output: {
    filename: 'js/[name].js',
    publicPath: '/',
  },

  devtool: 'cheap-module-eval-source-map',

  devServer: {
    hot: true,
    compress: true,
    contentBase: path.join(__dirname, './public/dist'),
    publicPath: '/',
    historyApiFallback: {
      index: '/landing-pages.html',
      rewrites: Object.keys(_.omit(apps(), ['admin', 'landing-pages'])).map(app => (
        { from: new RegExp(`^/${app}`), to: `/${app}.html` }
      )).concat([
        { from: /^\/back-office/, to: '/admin.html' },
      ]),
    },
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]',
              sourceMap: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                cssImport(),
                cssnext(),
              ],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
});

const prodConf = merge.smart(baseConf, {
  output: {
    filename: 'js/[name].[chunkhash].js',
    publicPath: '/',
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
              sourceMap: true,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                cssImport(),
                cssnext(),
                objectFitImage(),
              ],
            },
          }],
        }),
      },
    ],
  },
  plugins: [
    new UglifyJSPlugin({
       sourceMap: true,
       uglifyOptions: { ecma: 8 },
    }),
    new ExtractTextPlugin({
      filename: 'css/[name].[contenthash].css',
      allChunks: true,
      ignoreOrder: true,
    }),
    ...Object.keys(apps())
      .map(app => new SWPrecacheWebpackPlugin({
        cacheId: `${app}-galaxy`,
        filename: `${app}-service-worker.js`,
        stripPrefix: 'public/dist',
        staticFileGlobs: [
          'public/dist/js/manifest.*.js',
          'public/dist/js/vendor.*.js',
          `public/dist/js/${app}_vendor.*.js`,
          `public/dist/js/${app}.*.js`,
          `public/dist/css/${app}.*.css`,
          `public/dist/${app}.html`,
          'public/dist/fonts/*',
        ],
        dontCacheBustUrlsMatching: '/./',
        maximumFileSizeToCacheInBytes: 4194304,
        minify: true,
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/res.cloudinary.com\/universal-avenue\/.*\/v1\/commons\/logo_white.svg/,
            handler: 'cacheFirst',
          },
        ],
      })),
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
});

module.exports = production ? prodConf : devConf;
alexander-akait commented 7 years ago

@moimael hm, looks good, maybe something wrong with deps, can your make sure what your have 1.0.0-beta.2 version in node_modules/uglifyjs-webpack-plugin? Also please provide .babelrc file, thanks!

moimael commented 7 years ago

Yeah I checked the right version is being used, I even deleted and reinstalled my node_modules folder. Here is my .bablerc:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "last 2 versions",
          "Firefox ESR",
          "not ie < 11",
          "not ie_mob <= 11",
          "not op_mini all",
          "not op_mob 12.1",
          "not bb 7"
        ]
      },
      "useBuiltIns": true,
      "modules": false
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "lodash"
  ],
  "env": {
    "browser": {
      "plugins": [
        ["transform-imports", {
          "redux-form": {
            "transform": "redux-form/es/${member}",
            "preventFullImport": true
          }
        }]
      ]
    },
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}
alexander-akait commented 7 years ago

@moimael just for check, can your add "uglify": true to targets section? Btw some babel plugins can output non standard syntax, which doesn't support by uglify-es.

moimael commented 7 years ago

So I tried something and think I found the issue. If I use webpack -p even when specifying the uglify js plugin 1.0.0-beta2, it seems like webpack is using the builtin plugin. On the other end, if I use webpack --define process.env.NODE_ENV=production, my code correctly use the beta2 version and my code is minified without errors. It's very confusing though.

alexander-akait commented 7 years ago

@moimael known issue (after stable release, it will avoid), here in issues was solution (plugin) how unpin default webpack uglify plugin. Can we close issue?

jlengstorf commented 7 years ago

I ran into this error and was able to fix it by adding "uglify": true to babel-preset-env's targets in my .babelrc:

{
  "plugins": ["transform-object-rest-spread"],
  "presets": [
    "react",
    [
      "env",
      {
        "targets": { "node": "6.9.0", "uglify": true },
        "useBuiltIns": true
      }
    ]
  ]
}
kzc commented 7 years ago

@jlengstorf Be aware that if you use Babel's uglify target it's an alias for ES5 code generation. It came out before uglify-es.

https://github.com/babel/babel-preset-env/pull/178

If you want to minify ES6 code without transforming to ES5, you wouldn't want to use that.

Working ES6 webpack uglify-es example:

https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/133#issuecomment-332769465

jlengstorf commented 7 years ago

@kzc Thanks for this! After looking at my config again, I realized that the problem was that I had the -p flag set for webpack, so it was trying to run the built-in UglifyJS plugin.

Disabling that and switching to webpack.DefinePlugin (to set process.env.NODE_ENV="production") fixed the problem — no modifications required to babel-preset-env.

vineetkumar19871503 commented 7 years ago

@jlengstorf Thanks. Setting uglify to true worked for me!

amazingandyyy commented 7 years ago

thank you @jlengstorf. Setting uglify to true worked for me as well, I am just here to remind others who also want to use solution, you need babel-preset-env .

jgentes commented 6 years ago

UPDATE: The uglify target (ie. uglify: true) has been deprecated in @babel/preset-env. Set the top level option forceAllTransforms: true instead:

presets: [
      ['@babel/preset-env', {
          shippedProposals: true, // to support spread operators
          forceAllTransforms: true
      }]
}
epeleg commented 6 years ago

Just adding to summarize what worked for me: webpack 3.10.0 internally uses UglifyJsPlugin 0.4.6 which it exposes by default as webpack.optimize.UglifyJsPlugin for use inside webpack.cofig.js. however this version does not support es2015. what I based on what other people wrote in this thread was:

upgraded the following to devDependencies section of package.json : "webpack":"3.10.0"

1) added the following to devDependencies section of package.json : "uglifyjs-webpack-plugin":"1.1.6",

2) modified webpack.config.js so that the following:

new webpack.optimize.UglifyJsPlugin({
  sourceMap: true,
  ecma:8,
  compress: {
    warnings: false
  }

was replaced with:

new UglifyJsPlugin({
  sourceMap: true,
  uglifyOptions: {
    ecma:8,  
    compress: {
      warnings: false
    }
  }
}),

and added const UglifyJsPlugin = require('uglifyjs-webpack-plugin') near the top of the webpack.config.js file.

I hope this would sort things out for someone.

matthew-gordon commented 6 years ago

I was still running into issues, so I thought I'd also post for anyone that may still run into issues.

I had to stop running webpack with the -p flag, and set it to production using webpack.DefinePlugin && define the UglifyJsPlugin options, then running webpack --progress --colors etc.

Using Uglify isn't necessary to stop the the error in this instance, setting production through DefinePlugin works, but it compiled my server from 16kb down to 6kb with uglify, SO I left it in.

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  target: 'node',
  context: __dirname,
  node: {
    __dirname: false,
    __filename: false,
  },
  entry: './src/index.js',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js?$/,
        exclude: [/node_modules/],
        loader: 'eslint-loader',
      },
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
        options: {
          presets: [
            ['env', {
              targets: {
                node: "current",
              }
            }]
          ]
        }
      }
    ]
  },
  externals: [nodeExternals()],
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true)
    }),
    new UglifyJsPlugin({
      sourceMap: true,
      uglifyOptions: {
        ecma: 8,
        compress: {
          warnings: false
        }
      }
    }),
  ]
};
dehghani-mehdi commented 6 years ago

With following:

"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.11.0",

I got this error:

ERROR in bundle.js from UglifyJs Unexpected token: punc ({)

I tired @matthew-gordon and @epeleg 's solutions, but doesn't work.

With @matthew-gordon's solution, the error doesn't show up, but the size of bundle.js is +380KB

With @epeleg's solution, bundle.js size is ~180KB, but I got that error.

Both minified.

Did I miss something?