Closed moimael closed 7 years ago
I have same error with the equal ecma option.
@moimael thanks for issue, can your create minimum reproducible test repo?
@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 () =>
@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:
Here you go:
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: { ecma: 8 },
})
@moimael okey, let's debug this :+1:
@moimael same problem here with arrow function in my app.js main file
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 :
Good job btw :)
Any ideas or workaround ? :)
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]
Any update on this issue? It is preventing deployment.
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]
WIP
@ambewas just confirm, your use webpack
3.5.0?
@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
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"
}
@moimael @izatop @tapesec @Marcsimm @ambewas do your use webpack.optimize.ModuleConcatenationPlugin
? If yes, please try to disable and test again, thanks!
@evilebottnawi nope, only these:
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management',
template: './src/index.ejs',
})
],
@ambewas weird, can your create minimum reproducible test repo?
@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.
@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
@ambewas thanks!
Maybe can help somebody: if your use webpack 3.5.0
, just update to 3.5.1
(https://github.com/webpack/webpack/pull/5460).
@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
)
@ambewas don't worry, i am watching your repo right now.
@ambewas problems in your configuration:
babel-loader
:
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
}
},
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
.
@evilebottnawi thanks so much -- that works perfectly. Can't believe I overlooked that.
@moimael do your use babel-loader
?
Yes I do, but I use babel-preset-env that's why I need to minify es6
@moimael very strange, i create repo based on your information and all work as expected, no warnings and errors, need reproducible repo
Same problem here with babel-preset-env
installed, including es2015
didn't solve the problem.
@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.
@moimael locally, on my projects @pingshunhuangalex please create minimum reproducible test repo, thanks!
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.
@pingshunhuangalex
The repo provided is using an old version of uglifyjs-webpack-plugin
that uses uglify-js
which is ES5 only:
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:
@moimael friendly ping, can your provide at least webpack
config?
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;
@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!
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"
]
}
}
}
@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
.
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.
@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?
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
}
]
]
}
@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
@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
.
@jlengstorf Thanks. Setting uglify to true worked for me!
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
.
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
}]
}
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.
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
}
}
}),
]
};
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?
Using the latest beta 2 release, i still can't compile our project with webpack and uglify js. I get a bunch of errors:
I specified the
ecma: 8
option. Any idea why this happens ?Thanks !