react-intl and babel won't export messages, error in presets

Question

Running React and react-intl package with translations in FormattedMessage elements. When I attempt to run babel-plugin-react-intl, which should extract the messages to /build/messages, with presets being either "react-app" or "env","react" I either get errors on invalid presets, or arrow functions.

I'm attempting to extract react-intl messages to /build/messages/ using babel-plugin-react-intl. I cannot make this work with arrow functions, = () => because when using only preset "react-app" on .babelrc I get error:

ReferenceError: [BABEL] src\components\LocaleSelector\index.js: Unknown option: node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

When I run it with presets "env","react" I get syntax error on arrow functions:

SyntaxError: src/views/Header/index.js: Unexpected token (15:12)
  13 |  }
  14 |
> 15 |  toggleMenu = () => {
     |             ^
  16 |          document.body.classList.toggle('show-menu');
  17 |  };

I have tried installing plugins like "transform-es2015-arrow-functions" to compensate with no solution.

I also tried adding stage-2 etc. presets but according to Babel, these are deprecated after version 7.0. I got the build to run at one point, but messages were not extracted.

Below is my package.json and .babelrc.

package.json

{
    "name": "my-app",
    "version": "1.0.0",
    "private": true,
    "homepage": ".",
    "dependencies": {
        "axios": "^0.18.0",
        "glob": "^7.1.3",
        "intl-messageformat-parser": "^1.4.0",
        "mkdirp": "^0.5.1",
        "npm": "^6.6.0",
        "prop-types": "^15.6.2",
        "react": "^16.6.0",
        "react-addons-update": "^15.6.2",
        "react-axios": "^2.0.3",
        "react-bootstrap": "^0.32.4",
        "react-dom": "^16.6.0",
        "react-intl": "^2.8.0",
        "react-router-dom": "^4.3.1",
        "react-scripts": "2.1.1",
        "update": "^0.7.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "npm run build-messages && react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "build-messages": "set NODE_ENV=development&& babel ./src >NUL&&babel-node ./src/scripts/translate.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "@babel/core": "^7.2.2",
        "babel-cli": "^6.26.0",
        "babel-plugin-react-intl": "^3.0.1",
        "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2017": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-app": "^7.0.0"
    }
}

.babelrc

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        [
            "transform-es2015-arrow-functions",
            "react-intl",
            {
                "messagesDir": "build/messages"
            }
        ]
    ]
}

I can manage to make this work by removing all the arrow functions and to bind this in the constructor, but it's more code and more work. I would like to make the syntax work.

What exactly goes wrong here?

Answer 1

From what I can tell from your example it looks like you're not just using an arrow function you're using an arrow function as a class property (correct me if I'm wrong, feel free to share alittle more of your code snippet).

Class fields are not currently standard (almost! - stage 3 - https://github.com/tc39/proposal-class-fields ). If you wish to use it like your code shows you can use the babel plugin for the proposal: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

Alternatively, you could define your method like this instead:

toggleMenu () {
   document.body.classList.toggle('show-menu');
};

Answer 2

With babel 7, you need to use

@babel/plugin-proposal-class-properties

with Babel 7 you should also update preset-env and preset-react

.babelrc will look like

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
        "transform-es2015-arrow-functions",
        "react-intl",
        {
            "messagesDir": "build/messages"
        }
    ]
  ]
}

add @babel/preset-env, @babel/plugin-proposal-class-properties, @babel/preset-react in your dev Dependencies