Different babel environment configuration

Question

This answer seems outdated.

Current dependencies

babel: ^6.5.2
babel-core: ^6.10.4
babel-loader: ^7.0.0-beta.1
webpack: ^2.3.2
webpack-dev-server: ^2.4.2

npm scripts

// points to specific dev configuration
"serve": NODE_ENV=development webpack-dev-server --hot --config ./webpack/development.js

webpack config I'm using

.babelrc

{
  "env": {

    "development": {
      "presets": [
        "es2015",
        "stage-0",
        "react",
        "react-hmre"
      ],
      "plugins": [
        "babel-plugin-root-import",
        "react-html-attrs",
        "transform-es2015-destructuring",
        "transform-object-rest-spread",
        "syntax-object-rest-spread"
      ]
    },

    "production": ...
    "test": ...
  }
}

Babel docs say to use the above .babelrc env configuration, they also mention to use this specific presets config -- however, babel-loader is throwing this error with the above configuration:

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

What is the correct .babelrc to get different environments working?

Answer 1

The proper syntax for the presets key is a list of lists per the error message. If you corrected your code to be the following, it should work:

{
  "env": {
    "development": {
      "presets": [
        "es2015",
        "stage-0",
        "react",
        "react-hmre"
      ],
      "plugins": [
        "babel-plugin-root-import",
        "react-html-attrs",
        "transform-es2015-destructuring",
        "transform-object-rest-spread",
        "syntax-object-rest-spread"
      ]
    },
    "production": ...
    "test": ...
  }
}