Set version of EcmaScript generated by Babel, in react app

Question

I'm using the latest ES8 features in my react code, for example, async and await. Because of misconfiguration problem in my webpack config, I cannot use source maps, and this slows down debugging.

A quick solution could be to locally compile source code into ES7 or ES8, and test in the latest Chrome. How can I set this in .babelrc? Here's my current .babelrc:

{
  "presets": [
     "react-app"
  ] 
}

You should be using the env present and setting your targets. https://www.npmjs.com/package/babel-preset-env — Simeon Smith, Jul 13 '18 at 13:58
You can set your target to a specific version of Chrome. The target would be something like Chrome >= 58. Preset env uses browserslist. https://github.com/browserslist/browserslist#full-list — Simeon Smith, Jul 13 '18 at 14:00
@SimeonSmith when I set .babelrc to `{ "presets": [ ["env", { "targets": { "chrome": 67 } }] ] }`, Babel cannot recognize jsx. So this is not enough — Dan, Jul 13 '18 at 14:42
Don't remove the react-app preset. `{ "presets": [ "react-app", ["env", { "targets": { "chrome": 67 } }] ] }` — Simeon Smith, Jul 13 '18 at 14:45

Dan · Answer 1 · 2018-07-13T15:19:32.317

Answered here,

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "chrome": 67
      }
    }]
  ]
}

As of Jul 2018, the above setting would not support spread operator in objects. To enable it,

npm install --save-dev babel-plugin-transform-object-rest-spread

Use the following configuration in .babelrc:

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "chrome": 67
      }
    }]
  ],
  "plugins": ["transform-object-rest-spread"]
}

Set version of EcmaScript generated by Babel, in react app

1 Answers1