React - ES6 - Unexpected token

Question

I'm getting this error

ERROR in ./src/components/Header/index.js
Module build failed: SyntaxError: C:/Users/Gil/Documents/Projects/ecommerce/src/components/Header/index.js: Unexpected token (16:7)

  14 |   }
  15 |
> 16 |   test = () => {
     |        ^
  17 |     console.log('pass!');
  18 |   };
  19 |

i think its something with ES6, but i dont know, anyway here's my config

webpack.config.js

loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },...

package.json

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "1.0.7"

so my problem is, when i try to use arrow function i get this error, do i need an extra config or i'm doing something wrong?

*"when i try to use arrow function i get this error"* The problem is not with the arrow function. It's with the assignment `test = ...;`. — Felix Kling, Jun 05 '17 at 00:34

score 2 · Accepted Answer · edited Jun 05 '17 at 01:14

2

You need https://babeljs.io/docs/plugins/transform-class-properties/

npm install --save-dev babel-plugin-transform-class-properties

and inside .babelrc:

"plugins": ["transform-class-properties"]

edited Jun 05 '17 at 01:14

Yangshun Tay

49,270
33
114
141

answered Jun 05 '17 at 00:28

Andy Ray

30,372
14
101
138

2

You might want to explain why. – Felix Kling Jun 05 '17 at 00:33
Also, there are presets including not only this proposed language feature but others. For example, the `stage-2` preset currently includes all language features that have reached, well, stage 2 (of 4) along the path towards inclusion in ECMAScript. – Gabriel L. Jun 05 '17 at 01:56

React - ES6 - Unexpected token

1 Answers1

Linked