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?

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? — JLRishe, Jun 22 '19 at 01:00
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). — parastoo, Jun 22 '19 at 01:04
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. — JLRishe, Jun 22 '19 at 03:04
I installed the uglifyjs plugin and created webpack.config file as I mentioned above but it didn't help — parastoo, Jun 22 '19 at 19:56

score 24 · Accepted Answer · answered Dec 03 '19 at 11:45

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.

Milkman Matty · Answer 2 · 2021-11-13T00:05:16.267

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.

score 2 · Answer 3 · answered Dec 06 '19 at 09:59

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.

score 0 · Answer 4 · answered Jan 28 '20 at 13:54

0

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

answered Jan 28 '20 at 13:54

Yordanis Gómez Finalé

27
3

1

Even though uglify-js-es6 might still work, it was last updated 3 years ago. There are currently much better alternatives available. – Phaze Phusion Jan 28 '20 at 14:23

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

4 Answers4

Linked