1

I have set up react fullstack environment with webpack-middleware. I have some es6 syntax in my code but I get error while state without constructor or named arrow function. For example, I want to use semantic-ui for react sort table: https://react.semantic-ui.com/collections/table#table-example-sortable And while compiling I get this error: enter image description here

I thought it is because of wrong webpack setup I attached it below.

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

.babelrc

{
  "presets": ["env", "react", "es2015"]
}
Kamil Lewandowski
  • 396
  • 1
  • 5
  • 15

1 Answers1

8

You're trying to use class properties, which are currently stage 3 as part of the Class fields proposal. To be able to use them today, you have to install babel-plugin-transform-class-properties.

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

And add it to your plugins in .babelrc.

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties"]
}

I also removed the es2015 preset since it has been deprecated in favour of babel-preset-env, which contains everything es2015 does and more.

Michael Jungo
  • 31,583
  • 3
  • 91
  • 84
  • These aren't class fields, though, they're "fat arrow"-styled methods? – Thomas Hennes Oct 16 '17 at 15:28
  • 1
    They are class properties, you just happen to assign an arrow function to it. You could have just as well used `hideFixedMenu = true` or anything else in place of `true`. See also the [Example shown by `babel-plugin-transform-class-properties`](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-class-properties#example). – Michael Jungo Oct 16 '17 at 15:32
  • Thank you all for quick help. You are great. – Kamil Lewandowski Oct 16 '17 at 19:23