Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unexpected token punc «(», expected punc when creating chunk from UglifyJS

I have the following error when trying to do a production build using webpack 2.2.1 :

> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress

 Hash: 7bb2cdb98aab2f36f7e1                                                                 
Version: webpack 2.2.1
Time: 259158ms
                           Asset       Size  Chunks                    Chunk Names
39.1ac14d04bb54ae025fbd.chunk.js     575 kB      39  [emitted]  [big]  
                       .htaccess    1.53 kB          [emitted]         
                   manifest.json  624 bytes          [emitted]         
 0.b0881f3ea995a2fc465f.chunk.js     600 kB       0  [emitted]  [big]  
 1.350b2d8a46d91e3c0911.chunk.js     918 kB       1  [emitted]  [big]  
 2.e52c43dc81bf586e8812.chunk.js     636 kB       2  [emitted]  [big]  
 3.c7b3f0e5477649c6c9d3.chunk.js     646 kB       3  [emitted]  [big]  
 4.8ce7dfe0860e39ae2456.chunk.js     631 kB       4  [emitted]  [big]  
 5.d78c86c5b48b1b431c01.chunk.js     632 kB       5  [emitted]  [big]  
 6.9f79d2c5fa73cb97cc74.chunk.js     630 kB       6  [emitted]  [big]  
 7.3a675854451d716221c2.chunk.js     649 kB       7  [emitted]  [big]  
 8.5f09ba293a356e88feab.chunk.js     627 kB       8  [emitted]  [big]  
 9.edc7562575e48e9bce12.chunk.js     642 kB       9  [emitted]  [big]  
10.4a4bb6e69f6d7255d6ca.chunk.js     632 kB      10  [emitted]  [big]  
11.f5b5e0d36957300688bb.chunk.js     655 kB      11  [emitted]  [big]  
12.d2f74bd43695364d6e84.chunk.js     645 kB      12  [emitted]  [big]  
13.ab88bb5c89848d464643.chunk.js     628 kB      13  [emitted]  [big]  
14.cde57af54e53f5fa794f.chunk.js     626 kB      14  [emitted]  [big]  
15.df611a46991bdba9f78f.chunk.js     626 kB      15  [emitted]  [big]  
16.22d8ed2fc86438543bca.chunk.js     707 kB      16  [emitted]  [big]  
17.432aca8b104eb242add1.chunk.js     666 kB      17  [emitted]  [big]  
18.0c86d3404ce0d14653b2.chunk.js     650 kB      18  [emitted]  [big]  
19.d7636acc74397167013d.chunk.js     627 kB      19  [emitted]  [big]  
20.c3c519d8882f810910a6.chunk.js     632 kB      20  [emitted]  [big]  
21.fd6ec98dac51c188c629.chunk.js     708 kB      21  [emitted]  [big]  
22.200e5f939f77900a2f2f.chunk.js     643 kB      22  [emitted]  [big]  
23.393d2400f3a4357f1c2d.chunk.js     628 kB      23  [emitted]  [big]  
24.1c21a605f12ff9ff2fa7.chunk.js     634 kB      24  [emitted]  [big]  
25.5f5e33f51fe307545c6b.chunk.js     631 kB      25  [emitted]  [big]  
26.92502f109e3d6e616332.chunk.js     634 kB      26  [emitted]  [big]  
27.5d1ea5d6ebae15b96769.chunk.js     580 kB      27  [emitted]  [big]  
28.d571ed979e55c69096c2.chunk.js     579 kB      28  [emitted]  [big]  
29.c74d3346aca8532faf08.chunk.js     578 kB      29  [emitted]  [big]  
30.a35f7487c1c559c7f5d7.chunk.js     579 kB      30  [emitted]  [big]  
31.dc58b8286da5cbfefea3.chunk.js     567 kB      31  [emitted]  [big]  
32.6c32f4f35f9cda5c3938.chunk.js     587 kB      32  [emitted]  [big]  
33.ca86ec92b1a188a9c8e6.chunk.js     598 kB      33  [emitted]  [big]  
34.73c3e986500f888a12f5.chunk.js     571 kB      34  [emitted]  [big]  
35.59e71f89d6afcb9932bf.chunk.js     575 kB      35  [emitted]  [big]  
36.6285ac7b1164d4b53fc9.chunk.js     596 kB      36  [emitted]  [big]  
37.c301c304dd0bada883df.chunk.js     601 kB      37  [emitted]  [big]  
38.843bd7f01b202ca4d1bf.chunk.js     590 kB      38  [emitted]  [big]  
                     favicon.ico    67.3 kB          [emitted]         
40.db40e1c52ff3bad0bb78.chunk.js     586 kB      40  [emitted]  [big]  
41.cea7167bc8d0015ce8a3.chunk.js     576 kB      41  [emitted]  [big]  
42.4da525baabf2a11ff762.chunk.js     615 kB      42  [emitted]  [big]  
43.10dd5cb77bd71053c86a.chunk.js     569 kB      43  [emitted]  [big]  
44.dd2089c95eff121ed148.chunk.js     572 kB      44  [emitted]  [big]  
45.735f9eb7b75a9e0d5e3c.chunk.js     570 kB      45  [emitted]  [big]  
46.c691a6442ef58163ecb2.chunk.js     583 kB      46  [emitted]  [big]  
47.0bfb099e1d1bd4edff39.chunk.js     566 kB      47  [emitted]  [big]  
48.5ba43bcc43c12ecb8e4e.chunk.js    82.6 kB      48  [emitted]         
49.5a8172a8a9ef896cb1f5.chunk.js    35.5 kB      49  [emitted]         
50.0e982f73a5beb9ccad3a.chunk.js    36.3 kB      50  [emitted]         
51.8ab7ac85d02819586dc1.chunk.js    46.3 kB      51  [emitted]         
52.c8f155d9cef8f9f2937d.chunk.js    79.6 kB      52  [emitted]         
53.36c2fad479bf35b0d1f1.chunk.js    37.4 kB      53  [emitted]         
54.63e68a1593ab8ee4f2c6.chunk.js    36.3 kB      54  [emitted]         
55.8f657b8fdc6163d0550b.chunk.js    42.4 kB      55  [emitted]         
56.2a4cab26835a307d9468.chunk.js      35 kB      56  [emitted]         
57.ec95d3459dd932a74352.chunk.js    38.9 kB      57  [emitted]         
58.5e4c7da441e6c3244e25.chunk.js    18.2 kB      58  [emitted]         
59.50524fa7662caade7171.chunk.js    41.2 kB      59  [emitted]         
60.04694585a84e27f4b4a2.chunk.js    4.02 kB      60  [emitted]         
61.f532c12ec94650a77c36.chunk.js    4.11 kB      61  [emitted]         
62.0f7e16b18f11e6104300.chunk.js    4.91 kB      62  [emitted]         
63.04cd26a9cc98f6d2e251.chunk.js    4.86 kB      63  [emitted]         
64.28e531e8f67544ae8bb4.chunk.js    3.69 kB      64  [emitted]         
65.c6d529e00cc2f02d298d.chunk.js    4.11 kB      65  [emitted]         
66.9cd0049cdf2fae8311ac.chunk.js    6.84 kB      66  [emitted]         
67.8d860ceb8cfd8afec941.chunk.js    10.1 kB      67  [emitted]         
68.d511e394e401edc4742a.chunk.js    5.86 kB      68  [emitted]         
69.552c985835c018f52e83.chunk.js    12.4 kB      69  [emitted]         
70.f855bd5800a4d71c9e47.chunk.js     7.7 kB      70  [emitted]         
71.692364c8d68e9689e36c.chunk.js    24.1 kB      71  [emitted]         
72.38336d6626d6def72d84.chunk.js    24.4 kB      72  [emitted]         
73.b039a0a0b71d6645c37a.chunk.js    8.45 kB      73  [emitted]         
74.38e2ce6ee4774d0ce704.chunk.js    3.65 kB      74  [emitted]         
75.fd7b46e332d33698b270.chunk.js     6.4 kB      75  [emitted]         
76.6d6cf7ed17606711ae18.chunk.js    4.96 kB      76  [emitted]         
77.ebdbafe3da683a49d201.chunk.js    8.08 kB      77  [emitted]         
    main.89765ef68e927cffc5d6.js    1.41 MB      78  [emitted]  [big]  main
                      index.html  643 bytes          [emitted]         
                           sw.js    24.3 kB          [emitted]         
[./app/app.js] ./app/app.js 11.9 kB {78} [built]
[./app/containers/App/index.js] ./app/containers/App/index.js 7.38 kB {78} [built]
[./app/containers/App/selectors.js] ./app/containers/App/selectors.js 1.87 kB {78} [built]
[./app/containers/LanguageProvider/index.js] ./app/containers/LanguageProvider/index.js 7.01 kB {78} [built]
[./app/global-styles.js] ./app/global-styles.js 786 bytes {78} [built]
[./app/i18n.js] ./app/i18n.js 2.98 kB {78} [built]
[./app/routes.js] ./app/routes.js 26.9 kB {78} [built]
[./app/store.js] ./app/store.js 3.01 kB {78} [built]
[./node_modules/babel-polyfill/lib/index.js] ./~/babel-polyfill/lib/index.js 833 bytes {78} [built]
[./node_modules/intl/locale-data/jsonp/en.js] ./~/intl/locale-data/jsonp/en.js 24 kB {71} [built]
   [1] multi ./app/app.js 28 bytes {78} [built]
[./node_modules/react-dom/index.js] ./~/react-dom/index.js 59 bytes {78} [built]
[./node_modules/react-redux/lib/index.js] ./~/react-redux/lib/index.js 475 bytes {78} [built]
[./node_modules/react-router-redux/lib/index.js] ./~/react-router-redux/lib/index.js 1.97 kB {78} [built]
[./node_modules/sanitize.css/sanitize.css] ./~/sanitize.css/sanitize.css 856 bytes {78} [built]
    + 1207 hidden modules

ERROR in 1.350b2d8a46d91e3c0911.chunk.js from UglifyJs
Unexpected token punc «(», expected punc «:» [1.350b2d8a46d91e3c0911.chunk.js:20075,15]
Child html-webpack-plugin for "index.html":
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 588 bytes {0} [built]
Child __offline_serviceworker:
    [./node_modules/exports-loader/index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js] ./~/exports-loader?self.fetch!./~/whatwg-fetch/fetch.js 12.6 kB {0} [built]
    [./node_modules/offline-plugin/empty-entry.js] ./~/offline-plugin/empty-entry.js 0 bytes {0} [built]
    [./node_modules/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%5D%7D!./node_modules/offline-plugin/empty-entry.js] ./~/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%5D%7D!./~/offline-plugin/empty-entry.js 16.2 kB {0} [built]

npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.2.0
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress`
npm ERR! Exit status 2

I really don't know from where in my code it come from. I have just repared all the unit tests after month of non tdd development.

Is there a way to diagnosis this ?

like image 427
Dimitri Kopriwa Avatar asked Mar 06 '17 19:03

Dimitri Kopriwa


3 Answers

UglifyJs does not support ES6. The error is very likely the method shorthand syntax. For example:

const obj = {
  method() {
    // ...
  }
};

When it sees the opening parenthesis, it expected a colon instead, like this:

const obj = {
  method: function() {
    // ...
  }
};

Is there a way to diagnosis this ?

It tells you the exact line in your chunk, so take a look at it. In the error message you posted it is:

[1.350b2d8a46d91e3c0911.chunk.js:20075,15]
             ^                     ^    ^
         filename                line  column

Then you can simply search your project for an identifier you see. If you don't want to search the entire project you can run webpack with the --display-chunks flag. This will show which modules are included in the respective chunks, so you only need to look into those.

Instead of having to replace all the shorthand syntax, you can tell babel to transpile the shorthand syntax with the babel plugin transform-es2015-shorthand-properties.

For the record: Unit tests won't find such errors.

like image 158
Michael Jungo Avatar answered Oct 17 '22 21:10

Michael Jungo


Unexpected token punc «(», expected punc «:»

The error is stating that it is expecting a colon rather than an opening parenthesis, so the problem is probably regarding the declaration of a function like this:

var foo = {
    bar() {
        console.log('Something');
    }
}

and that will need to be changed to

var foo = {
    bar: function() {
        console.log('Something');
    }
}
like image 37
Yo Wakita Avatar answered Oct 17 '22 20:10

Yo Wakita


Changing presets from es2015 to env in .babelrc fixed it for me. Babel changed babel-preset-es2015 into babel-preset-env. Checkout this link - http://babeljs.io/env

{
    "presets": [
        - "es2015",
        + "env",
        "react"
    ],
}
like image 32
Hwang Jiyoung Avatar answered Oct 17 '22 21:10

Hwang Jiyoung