javascript - why webpack does not like this expression -

i tried build reactjs app using webpack , babel.

i started app react starter comes react-scripts build worked before. however, it's black box , didn't provide features need, when comes module doesn't uglifyjs.

my webpack.config.js looks pretty simple:

var path = require('path'); var webpack = require('webpack');  var build_dir = path.resolve(__dirname, 'build_webpack'); var app_dir = path.resolve(__dirname, 'src');  module.exports = {   entry: app_dir + '/index.js',   output: {     path: build_dir,     filename: 'bundle.js'   },   module: {     loaders: [       {         test: /.jsx?$/,         exclude: /node_modules/,          loader: 'babel'       },       {         test: /\.css$/,         loader: "style-loader!css-loader"       }     ]   } } 

and have config in package.js:

"scripts": {         "start": "react-scripts start",         "reactbuild": "react-scripts build",         "webpackbuild": "webpack --watch",         "test": "react-scripts test --env=jsdom",         "eject": "react-scripts eject"       } 

also .babelrc file has this:

{   "presets" : ["es2015", "es2016", "react"] } 

however, code worked in react-scripts build failed here, , error output says:

error in ./src/pages/searchtool/searchresult.js module build failed: syntaxerror: unexpected token (100:13)

(the error referring data input argument)

renderchip = (data) => {          return (            <chip              key={data.key} 

i don't see special expression. don't think commonly used should legal though. also, 1 reason switched webpack previous react build doesn't es6, 1 of module important written in es6.

i wonder missing in config or other places. help!

edit:

my package.js:

{   "name": "mycoolapps",   "version": "0.1.0",   "private": true,   "devdependencies": {     "css-loader": "^0.26.1",     "react-scripts": "0.7.0",     "webpack": "^1.13.3"   },   "dependencies": {     "ace": "git+https://github.com/ajaxorg/ace.git#master",     "antd": "^2.7.2",     "axios": "^0.15.3",     "babel-core": "^6.24.1",     "babel-loader": "^6.4.1",     "babel-preset-env": "^1.4.0",     "babel-preset-es2015": "^6.24.1",     "babel-preset-es2016": "^6.24.1",     "babel-preset-react": "^6.24.1",     "card": "^2.2.1",     "card-react": "^1.2.6",     "chat-template": "0.0.22",     "codemirror": "^5.25.0",     "credit-card-type": "^5.0.1",     "css-loader": "^0.26.1",     "d3": "^4.7.4",     "firechat": "^3.0.1",     "firepad": "^1.4.0",     "flux": "^3.1.0",     "gulp": "^3.9.1",     "gulp-sass": "^3.1.0",     "history": "^1.17.0",     "little-loader": "^0.2.0",     "lodash": "^4.17.4",     "material-ui": "^0.16.6",     "moment": "^2.17.1",     "node-sass": "^4.5.0",     "quill": "^1.2.3",     "rc-calendar": "^7.6.5",     "react": "^15.5.4",     "react-autosuggest": "^7.0.1",     "react-cookie": "^1.0.4",     "react-credit-card": "^0.20.0",     "react-dom": "^15.5.4",     "react-dropzone": "^3.8.0",     "react-event-timeline": "^1.2.2",     "react-infinite": "^0.10.0",     "react-infinite-scroller": "^1.0.7",     "react-list": "^0.8.3",     "react-notification-system": "^0.2.12",     "react-router": "^3.0.0",     "react-tap-event-plugin": "^2.0.1",     "seedrandom": "^2.4.2",     "simplewebrtc": "^2.2.2",     "style-loader": "^0.13.1",     "superagent": "^3.3.1",     "webpack": "^1.15.0",     "y-array": "^10.0.6",     "y-indexeddb": "^8.1.9",     "y-leveldb": "0.0.1",     "y-map": "^10.0.5",     "y-memory": "^8.0.8",     "y-richtext": "^9.0.8",     "y-text": "^9.3.2",     "y-webrtc": "^8.0.7",     "y-websockets-client": "^8.0.15",     "yjs": "^12.1.7"   },   "scripts": {     "start": "react-scripts start",     "reactbuild": "react-scripts build",     "webpackbuild": "webpack",     "test": "react-scripts test --env=jsdom",     "eject": "react-scripts eject"   } } 

update:

i tried env preset, , webpack.config.js looks this:

{   "presets":   [     "react",     [       "env",       {         "targets": {           "uglify": false,           "node": "current",           "debug": true,         },       }     ],   ], } 

however, still complains expression:

error in ./src/pages/searchtool/searchresult.js module build failed: syntaxerror: unexpected token (100:13)     98 |   }    99 |  > 100 |   renderchip = (data) => {       |              ^   101 |     return (   102 |       <chip   103 |         key={data.key}   @ ./src/pages/connections/connections.js 43:20-57 

the function looks in program (note: inside class):

  renderchip = (data) => {     return (       <chip         key={data.key}         onrequestdelete={this.handlerequestdelete}         style={{           borderradius: '6px',           margin: '0 4px',           height: 35         }}       >         {data.label}       </chip>     );   } 

and tried include plugins manually

the place function in class looks like:

class name extends component {     constructor(props) {...}      renderchip = (data) => {         return (           <chip             key={data.key}             onrequestdelete={this.handlerequestdelete}             style={{               borderradius: '6px',               margin: '0 4px',               height: 35             }}           >             {data.label}           </chip>         );       }      render() {...} } 

i manually included transform-es2015-function-name , transform-es2015-arrow-functions, didn't work. there other plugins need include manually? or caused other reason?

solved

the solution changing function experssion to:

renderchip() {     ... } 

please add babel-preset-env package.

your .babelrc should this: (["env" ...] part important here)

{   "presets": [     ["env", {       "targets": {         "uglify": true,         "node": "current"       }     }]   ] } 

reading docs mentioned above. uglifyjs not support es6. recommended use babel-minify instead.

uglifyjs not support es6 syntax, if using uglify minify code, targeting later browsers may cause uglify throw syntax errors.

to prevent these errors - specify uglify option, enable plugins and, result, compile code es5. however, usebuiltins option still work before, , include polyfills target(s) need.

update:

try installing/reinstalling these packages. may not need of them, may find use in them later on.

npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env babel-register babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-plugin-transform-regenerator 

write

renderchip(data) { 

instead of

renderchip = (data) => {