"Missing class properties transform", even after installing the relevant Babel plugin

Question

I've started some project in React, using this template: CoreUI React

It doesn't ship with the properties transform plugin, so i installed it. My babelrc file looks like this:

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

My dev dependencies:

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "copy-webpack-plugin": "4.3.1",
    "css-hot-loader": "1.3.6",
    "css-loader": "0.28.9",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "source-list-map": "2.0.0",
    "style-loader": "0.20.1",
    "uglify-js": "3.3.9",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.11.1"
  }

I didn't change anything in the webpack config file(should i?) Part of my webpack config file:

module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(extractSCSS.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {alias: {'../img': '../public/img'}}
              },
              {
                loader: 'sass-loader'
              }
            ]
          }))
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [
            {
              // loader: 'url-loader'
              loader: 'file-loader',
              options: {
                name: './img/[name].[hash].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]'
          }
        }]
    },

Once i try to compile, using the dev server, i get the nasty error, referring to a property defined in one of my class-based components.

I know this issue was raised here before, but non of the posts seemed to be revolving around a similar setup to mine, so i didn't find the solution there.

Idea, anybody?

Answer 1

You have to remove the options.presets key from the babel-loader config, because otherwise, Babel picks up these presets and ignores your .babelrc file.

Alternatively, you could provide the entire configuration in webpack.config:

options: {
    cacheDirectory: true,
    presets: ["react", "env"],
    plugins: [
        "transform-class-properties",
        "transform-object-rest-spread"
      ]
}