Missing class properties transform react

Question

I know there are many questions/answers out there but none of them seems to help me resolve my issue. I don't understand what is wrong with my setup:

Here is my webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ftux-components.js',
    library: "shared-components",
    libraryTarget: "umd"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass', 'postcss-loader']
      },
      {
        test: /\.(ttf|eot|svg|jpg|png|woff)$/,
        loader: 'url-loader'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    },
    'styled-components': {
      commonjs: 'styled-components',
      commonjs2: 'styled-components',
      amd: 'styled-components'
    }
  }
};

Here's my babelrc:

{
    "presets": ["env", "react", "es2015", "stage-0"],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
}

I tried reordering presets, adding appropriate plugins (transform-class-properties), deleting reinstalling node_modules but nothing seems to help. My npm and node is up-to-date, also tried using this to make sure I included everything I need for babel. Any suggestions?

You need to install babel-plugin-transform-class-properties if not already done so by using npm install babel-plugin-transform-class-properties --save-dev — tarzen chugh, Jun 06 '18 at 16:59
"babel-plugin-transform-class-properties": "^6.24.1", it's already installed :( — inertia, Jun 06 '18 at 17:02

score 3 · Answer 1 · answered Jun 06 '18 at 17:13

In your babel loader you're not including the plugin for class properties even though you already have it installed. Try making your loader look like this:

     {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },

score 2 · Answer 2 · answered Jun 06 '18 at 18:27

Okay I figured it out. I needed to include presets and plugins in the rules array in module object in webpack.config.js:

rules: [
    {
    test: /\.js$/,
    include: path.resolve(__dirname, 'src'),
    exclude: /(node_modules|bower_components|build)/,
    loader: 'babel-loader',
    query: {
        presets: ['env', 'react', 'es2015', 'stage-0'],
        plugins: ["transform-class-properties"]
    }
    }
]

Found the answer here.

Missing class properties transform react

2 Answers2