webpack -p outputs: ERROR in bundle.js from UglifyJs Unexpected token: name (login) [./login.es6:2,4]
Closed this issue ยท 88 comments
I am getting an error when trying to use webpack -p. When I change the code to ES5 compatible code it seems to work. Something with the UglifyJS minification and ES6 apparently.
This is my login.es6 file:
"use strict";
let login = (username, pw) => {
if (username !== 'admin' || pw !== 'radical') {
console.log("login incorrect");
}
};
login("admin", "test");I have exactly the same code as the course mentions. I am using the newer versions of the tools and it seems to be a problem there. When using the versions as provided in the course, There is also no error when only changing babel-core and babel-loader to the versions provided.
My version of devDependencies (with UglifyJS error):
"devDependencies": {
"babel-core": "^6.1.4",
"babel-loader": "^6.1.0",
"jshint": "^2.8.0",
"jshint-loader": "^0.8.3",
"node-libs-browser": "^0.5.3",
"strip-loader": "^0.1.0",
"webpack": "^1.12.4"
}My partially updated version of devDependencies (without UglifyJS error):
"devDependencies": {
"babel-core": "^5.4.7",
"babel-loader": "^5.1.3",
"jshint": "^2.8.0",
"jshint-loader": "^0.8.3",
"node-libs-browser": "^0.5.3",
"strip-loader": "^0.1.0",
"webpack": "^1.12.4"
}Does anyone have an idea on how to solve this minification problem while using babel >6?
Thanks!
@joeeames I am having the same issue here. I getting ERROR in bundle.js from UglifyJs
Unexpected token: name (login) [./login.es6:3,4] Please help here. Thanks
I'll try to take a look at it over the holiday. There was a major release for Babel so that's probably it.
Hey, you too! May the pie be never-ending!
Holiday is over Joe. Hope it was great! Now back to the error. I'm getting it also. Will back off to the versions you specified in the course. Cold Hearted Learner. Thanks, Jerry
Backed of babel-core to 5.4.7, babel-loader to 5.1.3 and for safety webpack to 1.12.9 and all worked well. Great course Joe. Moving forward. Jerry
ok, the readme file for this repo has the directions to work correctly around this issue while using the latest version of Babel. Please look at that, let me know if you have any issues. Also, an update has been submitted to the course videos, although it can take as long as a month to get published.
+1 UglifyJs in webpack not working with babel >= 6.0.0
Unexpected token: name ...
I followed the directions in this repo for Babel 6, but also getting the unexpected token error when running production build. It only happens in the "Organizing Files and Folders" course section, when the javascript files get moved into a js folder. In the previous section when all the js files are in the root directory, the production build runs fine.
Is there any other webpack config required to tell it that the js files are now in a "js" directory?
From the error message, looks like Uglify is trying to process the .es6 file, but should it first be transpiled to js by babel?
Running:
webpack --config webpack-production.config.js -pAnd error:
> webpack-pluralsight-lesson-03@1.0.0 prod /Users/dbaron/projects/webpack-pluralsight/lesson-04
> webpack --config webpack-production.config.js -p
Hash: d146267acff6790ea92d
Version: webpack 1.12.9
Time: 484ms
Asset Size Chunks Chunk Names
bundle.js 2.04 kB 0 [emitted] main
[0] multi main 40 bytes {0} [built]
+ 3 hidden modules
WARNING in ./app.js
jshint results in errors
document.write can be a form of eval. @ line 3 char 1
document.write('Welcome to Big Hair Concerts!! ignoring jshint error here');
ERROR in bundle.js from UglifyJs
Unexpected token: name (login) [./login.es6:3,4]
Update: I noticed that as of the "Organizing Files and Folders" course section, even running the dev build, the es6 files were no longer being transpiled. Updated the loader section slightly to specify "babel" instead of "babel-loader" and added a "query" section for presets. Now both dev and prod builds work:
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]I've ran into a similar problem, but, I'm not using Babel (unless I left a switch set somewhere in some pasted code, but I've checked). Instead, I am posting to a platform that allows ES6 natively via Node 4.3. Any advice on what I could do to correct this?
Unexpected token: name (str) [./handler.js:10,0]
Here' line #10 ..
let str = "";Just an update to those following this thread, I will be working through this to see what needs to change in the course, and apologies for the delays, the process takes a long time.
@joeeames I'm currently working through the tutorial; I can mark down any issues I come across and forward them on to you if it would help?
Same issue here.
@danielabar @joeeames When I ran into this, adding just the query option as per danielabar's comment fixed things for me:
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015"]
}
}
]
Thanks @danielabar.
npm install babel --save-dev
npm install babel-preset-es2015 --save-dev
loaders: [ {
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
Still not working for me , done the above points
Finally worked, was a error.
+1 for @danielabar's solution.
I was with same problem, but I'm using typescript with es6 and ts-loader.
// tsconfig.json
{
"compilerOptions": {
"target": "es6"
},
"files": [...]
}
And changed loader like this:
// webpack.config.js
module.exports = {
...
module: {
loaders: [
// note that babel-loader is configured to run after ts-loader
{ test: /\.ts(x?)$/, loader: 'babel-loader!ts-loader' }
]
}
}
Courtesy from http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/
Hope that help someone with same problem!
I have the same error in webpack 2 with typescript 2
Same here: webpack 2, typescript 2
For typescript, I recommend using npm i awesome-typescript-loader babel-loader babel-core --save-dev with the following rule:
rules: [
{
test: /\.ts$/,
loaders: [
'babel-loader?presets[]=es2015',
'awesome-typescript-loader',
// For angular2:
//'angular2-template-loader',
//`angular2-router-loader?genDir=compiled/app&aot=true`
],
exclude: [/\.(spec|e2e|d)\.ts$/]
}
]and tsconfig:
{
"compilerOptions": {
"target": "es6",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": true,
"skipDefaultLibCheck": true,
"strictNullChecks": false,
"outDir": "tmp"
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"useBabel": true,
"useCache": true
}
}webpack#2 users, I can also suggest an alternative solution who wants to stick to ES6 (by implication to prevent to transpile code on every build, and ofc prevent loading ES6 polyfills).below are detailed instructions to use the Harmony branch of UglifyJs2 with webpack:
- Fork webpack,
- On that fork, delete all branches except master,
- Clone master branch to a local folder,
- On the local folder, delete all files,
- Commit the empty local folder,
- Download the latest release (ex: v2.1.0-beta.27 at the moment)
- Extract contents of zip file to the local folder,
- On the local folder, edit forked package.json, change
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
to point UglifyJs2 (harmony branch) dependency to that branch.
- Commit changes,
- Finally, point webpack in your package.json to your custom fork:
"webpack": "[USERNAME]/webpack#master"
OR,
- Point webpack in your package.json to fulls1z3/webpack (ES6/ES2015 friendly webpack fork):
"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"
@fulls1z3 That doesn't seem to fix it for me.
I get an error on this code:
const parseSVG = function parseSVG(svg, width, height) {
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div')
div.innerHTML = '<svg width="'+width+'" height="'+height+'">'+svg+'</svg>'
return div.firstChild;
}Specifically:
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div')
Gives me the following output
== Executing: `./node_modules/webpack/bin/webpack.js --bail -p`
== External: Hash: a2d4637a403797466795
== External: Version: webpack 2.1.0-beta.27
== External: Time: 105ms
== External: Asset Size Chunks Chunk Names
== External: bundle.js 4.33 kB 0 [emitted] main
== External: [0] ./source/javascripts/all.js 1.9 kB {0} [built]
== External: ERROR in bundle.js from UglifyJs
== External: SyntaxError: Unexpected token: name (div) [bundle.js:73,7]
== External: Command failed with non-zero exit status
When I run ./node_modules/webpack/bin/webpack.js --bail -p"
With both "webpack": "2.1.0-beta.27" and "webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"
+1 seeing this issue. using webpack 2, babel 6
ERROR in empmap/empmap.bundle.js from UglifyJs
SyntaxError: Unexpected character '`' [./plugins/empmap/ui/module.js:17,0]
relevant webpack config:
module: {
loaders: [
{
test: /\.js$/,
include: JS_INCLUDES,
loader: 'babel-loader',
cacheDirectory: true,
query:{
presets: ['es2015'],
plugins: ["transform-es2015-template-literals"]
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
include: JS_INCLUDES
})
]
In my case I had accidentally left the .js extension off one of my files, so babel wasn't running on it first before uglify.
Using webpack@2.2.0-rc.1 + babel 6.21 and seeing the same error.
Installed "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0".
tried
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loade',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']
}
},
],
},
with no luck, however it works when I use
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader?presets[]=es2015',
exclude: /(node_modules|bower_components)/,
},
],
},
Webpack 2 doesn't read query settings anymore?
The syntax is invalid (we should have better validation here). That's what's possible:
rules: [
{
loader: "babel-loader",
options: {}
},
{
use: {
loader: "babel-loader",
options: {}
}
},
{
use: [
{
loader: "babel-loader",
options: {}
}
]
}
]options could be exchanged with query
tried both
options: {
query: {
presets: ['es2015'],
},
},
and
options: {
presets: ['es2015'],
},
and still getting the same error, am I missing something?
Thanks,
loader and options must be a pair. use it the container for the results. loader is one result.
Here is a syntax that will definitely work, because it's in the test suite:
Thanks. I didn't realise options has to be inside use. Will watch #3556
rules: [
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
},
},
],
},
],
},
works fine.
+1
:(
Webpack 2 + typescript.
Tried @kesarion solution and the ts-loader's example, nothing works.
Below is the error;
$ webpack -p
ERROR in scripts/app.js from UglifyJs
SyntaxError: Unexpected token: name (App) [scripts/app.js:10571,6]
Typescript code;
import style from '../css/top.scss'
import $ from 'jquery'
class App {
constructor() {
//TEST
}
}
$(document).ready(()=> {
let app = new App();
});
Webpack modules setting;
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/
}
],
Not a Typescript user, however saw this reference which may be of use to some: PatrickJS/PatrickJS-starter#853 (comment)
Got me headed in the right direction to fix my JSX issue.
+1
Hi All,
I think I'm experiencing the same Uglify incompatibility problem. I'm using webpack and webpack-stream to integrate with my gulp build system. I'm using the babel-loader; however, the system seems to fail at compression. Below is my code.
gulp.task('scripts', () => {
const WEBPACK_CONFIG = {
devtool: 'source-map',
module: {
rules: [{
test: /.jsx?$/,
include: 'src/js/includes',
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
plugins: ['transform-runtime'],
cacheDirectory: '.tmp/js',
}
}],
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
]
};
return gulp.src([
'src/js/main.js',
'src/js/desktop-only.js',
])
.pipe(named())
.pipe(webpackStream(WEBPACK_CONFIG))
.pipe(gulp.dest('build/js'));
});Is there another way to implement compression with Webpack2? Should I just stream the output of webpack through gulp-uglify? Am I missing the mark. Is this a red herring?
BTW, below is my error:
janthony-mac:src judahanthony$ gulp scripts
[16:08:52] Requiring external module babel-register
[16:08:52] Using gulpfile ~/workspace/src/gulpfile.babel.js
[16:08:52] Starting 'scripts'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: desktop-only.js from UglifyJs
Unexpected token: punc ({) [desktop-only.js:54,8]main.js from UglifyJs
Unexpected token: name ($) [main.js:56,8]
+1
Experiencing the same issue, +1 from me too.
Same issue. How is this still going 2 years later?
Hello i have similar issue i try everything
i install all modules using yarn is that might be a problem ?
from UglifyJs Unexpected token: name
webpack.config.js
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var pathDist = './dist/';
var pathSrc = './src/';
const extractSass = new ExtractTextPlugin({
filename: pathDist+"main.css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
entry: pathSrc+'js/app.js',
devtool: "source-map", // any "source-map"-like devtool is possible
output: {
filename: pathDist+'bundle.js'
},
module: {
loaders: [
{test:/.html$/},
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
rules: [{
test: /.scss$/,
loader: extractSass.extract({
loader: [{
loader: "css-loader", options: {
sourceMap: true
}
},
'postcss-loader',
{
loader: "sass-loader", options: {
sourceMap: true
}
}],
// use style-loader in development
fallbackLoader: "style-loader"
})
}]
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
extractSass,
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: false
})
]
}
sample dumy files
test.js
class Test {
constructor(){
}
run(){
$(document).ready(function(){
$('#myModal').modal('show');
console.log('zzzfdssdfzzzzzzz');
});
}
}
export default Test;
app.js
import 'jquery';
import 'bootstrap-sass/assets/javascripts/bootstrap';
import Test from './test';
var test = new Test();
test.run();
//css file
import '../scss/main.scss';
$(document).ready(()=>{
var a = 1;
// $('#myModal').modal('show');
console.log(`tesdfdsfsdssst ${a}`);
});
What im doing wrong ?
I had the same issue and found out that one of my dependencies uses es6's "let" keyword. As "node_modules" is excluded from transpilation in my webpack config, uglifyjs could not process it properly.
@wnadurski Yes this was the fix surprisingly! I was able to do webpack -d no problem but webpack -p failed with UglifyJS error. It turns out changing my tsconfig.json from ES6 to ES5 made it work!
e.g.
file which name is ".babelrc",
{
"presets": ["es2015"],
"compact" : false
}
TL;DR
add .babelrc and babel-preset-es2015
UglifyJs does not support block scoping. If the code is somehow not transpiled properly, then UglifyJs blows up. es2015 preset should sort this problem out but particularly, if you only use a few transforms rather than a complete preset, you'll need "transform-es2015-block-scoping".
npm install --save-dev babel-plugin-transform-es2015-block-scoping
{
"plugins": ["transform-es2015-block-scoping"]
}
More details on installing it below.
http://babeljs.io/docs/plugins/transform-es2015-block-scoping/
for webpack2.0
use
{
test: /\.(tsx|ts)$/,
use: ["babel-loader","ts-loader"],
exclude: "/node_modules/"
}
instead of
{
test: /\.(tsx|ts)$/,
loader: "ts-loader",
exclude: "/node_modules/"
}
and tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"jsx": "react"
}
}
and .babelrc
{
"presets": ["es2015", "react", "stage-0"]
}
because ts has compiler tsx to es6 and uglifyJS can't compress ES6. To slove this problem ,use babel convert it to es5 which is build convert by ts.
Since uglify doesn't fully support es6 in the build, you can specify it in your .babelrc file.
(in addition to babel-core and babel-loader add...)
npm install babel-preset-env --save-dev
In your .babelrc file
{ "presets": [ ["env", { "targets": { "uglify": false } }] ] }
Thanks for this thread! It was nearly an hour I've been trying things out. @danielabar 's solution worked for me ๐ฏ
on my side the problem was that it didn't transpile the code so when it tried to minify the error occured.
In order to fix it I replaced: test: /.es6$/, with test: /.js$/,
solution by @willjones2k worked for me with Webpack 3.0.0
Experienced same problem, I tried adding
{
"presets": ["es2015"]
}
in .babelrc
and installed
npm install babel --save-dev
npm install --save-dev babel-preset-es2015
there is no webpack config js file in my project dir.
any suggestions ?
I was getting the same error with a React.js app. Solved the problem by adding babel-preset-es2015 to dev dependencies and to the babel presets in my package.json.
npm i -D babel-preset-es2015
"babel": {
"presets": [
"react",
"babel-preset-es2015"
]
}
I don't know if this is helpful to anyone else, but what I was seeing was,
I use .babelrc just to parse my gulpfile.babel.js, and then in gulp I was passing all my configurations directly to my webpack driver to build the JS for the whole site. The problem was that (even though I was explicitly passing my config) it was also picking up the .babelrc file and overriding the manual configs. Not sure if this is a sane default; however, you can tell the babel-loader plugin to ignore your .babelrc file.
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
"only": "src/js/**",
"presets": [
"flow",
"react",
["env", {
"targets": {
"browsers": "last 2 versions"
},
"useBuiltIns": true
}]
],
"plugins": ["transform-class-properties", "syntax-dynamic-import"],
"babelrc": false,
}
},
}
]
},
For those using Webpack Version 3.0.0 this helped me:
- Remove babel-loader from
loadersand instead place it underrules
//...
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'jshint-loader'
}
]
},
{
test: [/\.es6$/, /\.js$/],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
loaders: [
]
},
//...
- Modify
testto include.jsfiles (already included in above snippet). - In the console run
npm install babel-preset-env --save-dev - Then try running
webpack -pin the console again.
Hope this solves the problem for others.
These seems too common of a problem, and merits being officially addressed with a solution.
As mentioned there, an easy alternative is to use babili-webpack-plugin instead of Webpack's builtin UglifyJSPlugin.
Check if "login" is declared using "let" and try changing it to var.
ERROR in bundle.js from UglifyJs Unexpected token: name (login) [./login.es6:2,4]
Too many comments above. I've just removed
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
and all works fine. no plugin no problem
@ahmad2smile thank you!!!!!!!
use babel-loader can solve this problem~
module: { rules: [{ test: /\.js$/, include: [path.resolve(__dirname,'src/')], use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }] }] }
Resolution (for me):
Same issues, resolved. This may only pertain to my own setup. I was following the course videos and knew that I could come here if issues came about but I made the mistake of copying @joeeames package.json file 100% and doing an npm install which resulted in a webpack version of 1.12.9 where-as webpack (as of today) is on a current release of 3.6.0.
I was including everyone's recommendations (from here) and getting no-where. Turned out to be that I had a big mess of hybrid code all trying to work on an outdated version of webpack.
Check your Webpack version:
npm list webpack
If you are out of date and trying to use "rules" instead of "loaders" and "use" instead of "loader":
npm uninstall webpack --save-dev
npm install webpack --save-dev
If you use babel-preset-env :
[ "env", { "targets": { "uglify": true } } ]
I am new entry in the club.
I lost an hour trying all the possible solutions posted above and elsewhere.
The only solution that worked for me was the one posted by @alexey-sh.
But what is going on here?
Isn't this just a workaround in the end?
In my case I encountered the issue after installing a vue component.
But I see that the same issue was reported on dozens of other vue components.
So who is at fault exactly?
Babel, webpack, uglifyJS?
้
็ฝฎ่ฆๅๅจrules้้ขๅๅๅๅใใใ
ไธไธชๆ่ฟๅ็ฌ้
็ฝฎloaderๅฏไปฅ็ดๆฅ็ผ่ฏ๏ผ็็ๆฏใใใ
็ถๅๆๆ exclude: /node_modules/ ๅ ไบไนๅฏไปฅwebpack -p
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
Just bumped to that issue because I was actually using webpack.optimize.UglifyJsPlugin(). Just did a
$ npm i -D uglifyjs-webpack-pluginAnd updated my webpack.config.babel.js like so
import UglifyJS from "uglifyjs-webpack-plugin";
// ...
if (process.env.NODE_ENV === "production")
config.plugins = [new UglifyJS({/* ... */})];@aminnairi 's solution worked for me,
Problem is I was running webpack 1 syntax file with webpack 3 which compiled fine except UglifyJs, this problem is elaborated by @jjaeger4
Using https://github.com/webpack-contrib/uglifyjs-webpack-plugin
const UglifyJS = require('uglifyjs-webpack-plugin');
// ....
new UglifyJS({ uglifyOptions: { warnings: false } })
Note: in case someone stumbles upon this issue, after searching for a solution, I add my current working solution notes here.
After reading through this issue and another one in the webpack repository, I got the following two alternative working solutions.
I first installed these packages (Note: babel-preset-es2015 -> babel-preset-env):
>> package.json
npm i babel-loader babel-preset-env uglifyjs-webpack-plugin --save-dev
Then I either modified the targets in the .babelrc or the rules in the webpack.config.js:
>> .babelrc
{
"presets": [
["env", {
"targets": {
"node": "current",
"uglify": true // <<< this line
}
}],
"react"
],
// ...
}
or add the options object to the babel-loader.
>> webpack.config.js
// ...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: { // << add options with presets env
presets: ['env']
}
}
}
]
}
(thx @xuwanwanTT for the hint)
My webpack config (plugins) looks like this afterwards:
>> webpack.config.js
// ...
plugins: [
new UglifyJSPlugin({
test: /\.js($|\?)/i,
sourceMap: true,
uglifyOptions: {
compress: true
}
}),
]
// ...
It also works if you use both together. After that webpack -p --config webpack.config.js worked again for me.
The new webpack.optimize.UglifyJsPlugin can not parse "let" token
My solution is replacing uglifyjs-webpack-plugin by uglifyes-webpack-plugin
npm i uglifyes-webpack-pluginedit node_modules/webpack/lib/optimize/UglifyJsPlugin.js(don't do this, thanks @natterstefan )
- const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+ const UglifyJsPlugin = require("uglifyes-webpack-plugin");- edit build/webpack.prod.conf.js (do this)
+ const UglifyJsPlugin = require("uglifyes-webpack-plugin");
...
plugins: [
- new webpack.optimize.UglifyJsPlugin({
+ new UglifyJsPlugin({
...@up9cloud Don't you think it is kinda dangerous to edit files in the node_modules folder? As other developers need to edit them too and module-upgrades would remove the temporary solution as well/most likely.
@natterstefan umm... you're right. we should avoid to edit node_modules/ content.
edited.
thanks!
I implemented a solution by combining @aminnairi solution and other ones mentioned above.
npm install uglifyjs-webpack-plugin --save-dev
in webpack config, import this plugin:
const UglifyJs = require('uglifyjs-webpack-plugin');
and in webpack plugins I used this plugin instead of webpack.optimize.UglifyJsPlugin:
new UglifyJs()
do not exclude "node_modules"
@up9cloud While that solution does look promising, I think the real problem lies with babel.
Uglify shouldn't have to worry about parsing 'let' keywords, babel should already have transpiled them, unless every current browser in use supports let, in which case I take that statement back, the webpack guys should go ahead and implement your solution lol.
In my case I have one specific file (its a large jsx file) and two very specific lines in it are not being transpiled by babel for some reason?!
if (!this.props.isLoading)
for (let n = topRowInd; n < Math.min(this.props.dataWrapper.count, topRowInd + rowCount); n++) {
let clusterMatch = me.props.clusters.reduce((aggr, cluster)=>{
if (cluster.rowIndStart<=n && cluster.rowIndStart+cluster.rowIndCount>n)
return cluster;
return aggr;
}, null);
...
Out of this cutout of code, the 'let n' does not transpile to 'var' and the '(aggr, cluster)=>{' does not transpile to 'function (aggr, '. Absolutely every thing else in this file transpiles correctly tho, before it gets to uglify.
@up9cloud / @manojkumaran very clean solution. Thank you, this was a major headache
@manojkumaran For some reason npm install uglifyjs-webpack-plugin --save-dev worked, is the UglifyJs plugin included with webpack.optimize.UglifyJsPlugin() not the same plugin / version?
@megamindbrian You are correct it is not the same version.
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
โน๏ธ webpack =< v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0
Got it fixed by installing uglifyjs2
Yes, same for me, as well as modifying the config to use the new package instead of the built in one that comes with webpack
created a .babelrc file. Added this there
{ "presets": [ ["latest", { "es2015": { "modules": false } }] ] }
Hi I am getting the error
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'pack:renderer' ]
2 info using npm@5.5.1
3 info using node@v8.9.0
4 verbose run-script [ 'prepack:renderer', 'pack:renderer', 'postpack:renderer' ]
5 info lifecycle field-inspection-app@1.1.0prepack:renderer: field-inspection-app@1.1.0pack:renderer: field-inspection-app@1.1.0
6 info lifecycle field-inspection-app@1.1.0
7 verbose lifecycle field-inspection-app@1.1.0pack:renderer: unsafe-perm in lifecycle truepack:renderer: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\GSR\sourcecode\FIELD-ISPECTION-APP\node_modules.bin;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\GSR\sourcecode\FIELD-ISPECTION-APP\node_modules.bin;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\GSR\sourcecode\FIELD-ISPECTION-APP\node_modules.bin;C:\Program Files\Docker\Docker\Resources\bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Skype\Phone;C:\Program Files\nodejs;C:\Program Files\MongoDB\Server\3.4\bin;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\Users\P10424005\AppData\Local\Microsoft\WindowsApps;C:\Users\P10424005\AppData\Roaming\npm;C:\Program Files\Microsoft VS Code\bin;C:\Users\P10424005\AppData\Local\Programs\Fiddler;C:\Users\P10424005\AppData\Local\Yarn\bin
8 verbose lifecycle field-inspection-app@1.1.0
9 verbose lifecycle field-inspection-app@1.1.0pack:renderer: CWD: C:\GSR\sourcecode\FIELD-ISPECTION-APPpack:renderer: Args: [ '/d /s /c',
10 silly lifecycle field-inspection-app@1.1.0
10 silly lifecycle 'cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js' ]
11 silly lifecycle field-inspection-app@1.1.0pack:renderer: Returned: code: 2 signal: nullpack:renderer: Failed to exec pack:renderer script
12 info lifecycle field-inspection-app@1.1.0
13 verbose stack Error: field-inspection-app@1.1.0 pack:renderer: cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:280:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid field-inspection-app@1.1.0
15 verbose cwd C:\GSR\sourcecode\FIELD-ISPECTION-APP
16 verbose Windows_NT 10.0.15063
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "pack:renderer"
18 verbose node v8.9.0
19 verbose npm v5.5.1
20 error code ELIFECYCLE
21 error errno 2
22 error field-inspection-app@1.1.0 pack:renderer: cross-env NODE_ENV=production webpack -p --progress --colors --config webpack.renderer.config.js
22 error Exit status 2
23 error Failed at the field-inspection-app@1.1.0 pack:renderer script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
Please help me its urgent
I had this error message :
ERROR in bundle.js from UglifyJs
Unexpected token: name (errors) [bundle.js:82440,5]
I fixed the error by replacing :
plugins = [
new webpack.optimize.UglifyJsPlugin()
]
with :
plugins = [
new UglifyJsPlugin()
]
I'm using version 1.0.1 of the uglifyJS plugin ("uglifyjs-webpack-plugin": "^1.0.1")
//exclude: /(node_modules|bower_components)/,
I was using Webpack 2.7 and was having the same error. Then I decided to upgrade it to version 3. Voila, it resolved my issue.
Can somebody tell me where to create webpack.config.js? I don't have any in the root directory but there are a lot in other folders in node modules.
I tried all the suggestions but still, the problem exists.
Thanks, Kmoec
I also update webpack to the latest version and it solved the issue "ERROR in bundle.js from UglifyJs Unexpected token".