satendra satendra - 2 months ago 143
Javascript Question

webpack uglify error: Unexpected token: keyword (function)

I am trying to run npm run build but I can't do this.

And I am using webpack 2, But it is giving me an

ERROR
in uglifyJs

app.3e1e32973e47000acf37.js from UglifyJs
Unexpected token: keyword (function) [app.3e1e32973e47000acf37.js:130155,20]
ERROR in app.bundle.js from UglifyJs


here is my package.json


"devDependencies": {
"angular-animate": "^1.6.4",
"angular-aria": "^1.6.4",
"angular-sanitize": "^1.6.4",
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"copy-webpack-plugin": "4.0.1",
"html-webpack-plugin": "^2.7.1",
"postcss-loader": "1.2.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.1",
"style-loader": "^0.13.0",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
}

"scripts": {
"build": "rimraf dist && webpack -p --bail --progress --profile",
"server": "webpack-dev-server --port 8080 --history-api-fallback --inline --progress",
"start": "npm run server"
},


Here is my webpack.config.js file

config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
loader: 'babel-loader',**strong text**
exclude: /node_modules/
}


Here is my babel file

{
"presets": ["es2015"]
}


And when I change webpack.config.js file with this new test object from js to es6


config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.es6$/,
loader: 'babel-loader',**strong text**
exclude: /node_modules/
}


I get the ERROR ERROR in app.8c6dc5e29db45e3eb325.js from UglifyJs
Unexpected token: operator (>) [app.8c6dc5e29db45e3eb325.js:5564,32]

Please let me know what I am doing wrong here for running npm run build?

Answer Source

You need to change your babel configuration in this way

"devDependencies": {    
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-0": "^6.24.1"    
  }

Update your babelrc

{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

and use this configuration for webpack

  config.module = {
    rules: [{
      // JS LOADER
      // Reference: https://github.com/babel/babel-loader
      // Transpile .js files using babel-loader
      // Compiles ES6 and ES7 into ES5 code
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    },

That should do the trick.