Cannot fix "Unexpected token name «i», expected punc «;»" from UglifyJs

Question

I have created a react app with a custom next server

server.js:

const { createServer } = require('http');
const next = require('next');
const app = next({
  dev: process.env.NODE_ENV !== 'production',
  conf: {
  webpack: config => {
    config.devtool = false;
    for (const r of config.module.rules) {
      if (r.loader === 'babel-loader') {
        r.options.sourceMaps = false;
      }
    }
    return config;
  }
}
});
const routes = require('./routes');
const handler = routes.getRequestHandler(app);
app.prepare().then(() => {
   createServer(handler).listen(3000, err => {
    if (err) throw err;
   });
});

However, I have a problem with npm run build because I get the following error:

Unexpected token name «i», expected punc «;» [commons.js:124406,11]
at /home/parstoo/Dropbox/Projects/Ethereum/SupplyChain/node_modules/next/dist/server/build/index.js:182:21

According to forums, the problem is caused because UglifyJs does not support ES6 so I tried to solve it with these links: this and this. I almost tried all the suggestion but none of them worked.

Also, I did not have webpack.config.js in the root directory. So, I ceated one in the root(which I don't know whether it's correct or not) with this content: webpack.config.js:

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

module.exports = {
  optimization: {
  minimizer: [new UglifyJsPlugin()],
  },
};

package.json content:

 {
   "name": "supplychain",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "mocha",
     "dev": "node server.js",
     "start": "NODE_ENV=production server.js",
     "transpile": "babel src -d dist --copy-files",
     "prepublishOnly": "npm run transpile",
     "build": "next build",
     "deploy": "gh-pages -d examples/dist",
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@babel/polyfill": "^7.2.5",
     "fs-extra": "^7.0.1",
     "ganache-cli": "^6.4.1",
     "mocha": "^5.2.0",
     "next": "^4.1.1",
     "next-routes": "^1.4.2",
     "radium": "^0.25.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "semantic-ui-react": "^0.82.5",
     "solc": "^0.4.25",
     "truffle-hdwallet-provider": "0.0.3",
     "web3": "^1.0.0-beta.35"
  },
    "devDependencies": {
      "@babel/cli": "^7.2.3",
      "@babel/core": "^7.2.2",
      "@babel/preset-env": "^7.3.1",
      "babel": "^6.23.0",
      "babel-cli": "^6.26.0",
      "babel-preset-es2015": "^6.24.1",
      "css-loader": "^2.1.0",
      "html-webpack-plugin": "^3.2.0",
      "npm-install-webpack-plugin": "^4.0.5",
      "terser-webpack-plugin": "^1.3.0",
      "uglifyjs-webpack-plugin": "v1.0.0-beta.1",
      "webpack": "^4.35.0",
      "webpack-cli": "^3.3.4",
      "webpack-dev-server": "^3.7.2"
  }
}

Can somebody help me solve the problem?

Interdependent

You say you tried two things. What did you actually try? Are you actually using webpack or doing anything to compile your script from ES6, or did you just place a webpack.config.js file in your project? – Maurits

I tried all the suggestions in those two links including changing .babelrc files, creating webpack.config.js with the content I mentioned above,... and for the second question, I just place webpack.config.js file in my project(root directory). – Interdependent

You need to actually use webpack in order for it to do anything. Perhaps you should go through the tutorials on the webpack site? There is an uglifyjs plugin available for webpack, so possibly, that's just what you need. – Maurits

I installed the uglifyjs plugin and created webpack.config file as I mentioned above but it didn't help – Interdependent

Answer 1

According to forums, the problem is caused because UglifyJs does not support ES6 so I tried to solve it with these links: this and this. I almost tried all the suggestion but none of them worked.

Instead of using UglifyJs, try using terser ! https://github.com/terser/terser

Uglify-js is able to transpile only es5 syntax. If you want to transpile es6+ syntax use terser instead.

Mongo

Answer 2

UglifyJs is ES5 compatible only (does not support ES6). I see in your code your first transpile ES6 to ES5 with Babel. Make sure Babel really transpiles ES5 to ES6 otherwise UglifyJs will throw this error !

I had the same problem and what I did to fix the problem is the following: 1) Transpile ES6 js files with Babel and check the result. 2) As a result I saw that some part of the code was still in ES6! 3) Find the rootcause (my problem was a default babel file name that exclude node_module transpilation => babel 7 don't compile class ES6 which in node_modules).

Hope it helps.

Mongo

Answer 3

Likely a rather niche case, but I was getting this error when calling await without declaring the function as async:

function doThing() {
    ...
    let response = await fetch('url');
    ...
}

which gave me the following error:

Caused by: SyntaxError: Unexpected token: name «fetch», expected: punc «;»

While the error is right, it doesn't help at all in fixing the problem. The fix was to add async before the function declaration.

Parallelogram

Answer 4

You can use uglify-js-es6 npm i uglify-js-es6

Slipon

Even though uglify-js-es6 might still work, it was last updated 3 years ago. There are currently much better alternatives available. – Ado