Which Babel presets should I use?

Question

I have the following .babelrc in the root directory of a React project that I build with Webpack (created with create-react-app).

{
  "presets": ["react-app", "env"],
  "plugins": [
    [
      "react-intl",
      {
        "messagesDir": "./public/messages/"
      }
    ]
  ]
}

When I run the build, I get the following error

Syntax error: Missing class properties transform.

  1 | export default class ValidationUtils {
> 2 |   static isPhoneNumber = 'whatever'
    |   ^
  3 | }

If I remove "env" from the presets list I no longer get this error, but instead, I get an error that complains about the usage of an ES6 import in a script that is run as part of the build

/apps/my-app/scripts/mergeMessages.js:3
import * as fs from "fs";
^^^^^^

SyntaxError: Unexpected token import

Is there some presets setting (or anything else) that will overcome both of these issues?

I wrote an article recently https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745 there is a babel configuration in it, that handles your use cases. — Adeel Imran, Aug 30 '18 at 19:01

score 3 · Accepted Answer · answered Aug 30 '18 at 19:03

You need the transform-class-properties plugin: https://babeljs.io/docs/en/babel-plugin-transform-class-properties

You babelrc will then look like this:

{
  "presets": ["react-app", "env"],
  "plugins": [
    [
      "react-intl",
      {
        "messagesDir": "./public/messages/"
      }
    ],
    "transform-class-properties"
  ]
}

Which Babel presets should I use?

1 Answers1