Module build failed: Error: Couldn't find preset "transform-class-properties" relative to directory

Question

I've tried putting an arrow function in my class which failed to compile.

I've read that I should install https://www.npmjs.com/package/babel-plugin-transform-class-properties

Now I'm getting the error:

Module build failed: Error: Couldn't find preset "transform-class-properties" relative to directory "/home/luke/Documents/myProject"

I've tried the solutions suggested in these posts (and others)

Webpack + Babel: Couldn't find preset "es2015" relative to directory

Error: Couldn't find preset "es2015" relative to directory

My current setup is as follows:

/app/components/App.js

import React from 'react'
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'

class App extends React.Component{

  sayHello = name => `Hello ${name}!`

  render(){
    return(
      <Router>
        <div >
          ...
        </div>
      </Router>
    )
  }
}

export default App

/package.json

{
  "name": "um-web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "NODE_ENV='production' webpack -p"
  },
  "babel": {
    "presets": [
      "env",
      "react",
      "es2015",
      "transform-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "amazon-cognito-identity-js": "^1.19.0",
    "axios": "^0.16.2",
    "d3": "^4.9.1",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "query-string": "^4.3.4",
    "react": "^15.6.1",
    "react-dimensions": "^1.3.0",
    "react-dom": "^15.6.1",
    "react-measure": "^2.0.2",
    "react-router-dom": "^4.1.1",
    "recharts": "^1.0.0-alpha.1",
    "semantic-ui-react": "^0.69.0"
  }
}

/webpack.config.js

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')

var config = {
  entry: './app/index.js',
  output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module:{
    rules:[
      { test: /\.(js)$/, use: 'babel-loader'},
      { test: /\.css$/, use: ['style-loader', 'css-loader']}
    ]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
}

if(process.env.NODE_ENV === 'production'){
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env' : {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
    new webpack.optimize.UglifyJsPlugin()
  )
}

module.exports = config

Answer 1

transform-class-properties is a plugin not a preset, so you should put it in your babel plugin config.

Here is an example .babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"],
        "uglify": true
      },
      "modules": false
    }],
    "react"
  ],
  "plugins": [
    ["transform-class-properties", { "spec": true }],
    "transform-decorators",
    "transform-object-rest-spread",
    "react-hot-loader/babel"
  ]
}

And the explanation of this plugin:

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

Hope this helps.