How to customize babel config?

Note from maintainers

For people coming to this thread later—if you use MobX or a similar library, you don’t need decorators. They are just syntax sugar in this case. Learn more: https://github.com/facebookincubator/create-react-app/issues/214#issuecomment-236151343, https://github.com/facebookincubator/create-react-app/issues/411#issuecomment-238974268. Here is why we don’t include them: https://github.com/facebookincubator/create-react-app/issues/411#issuecomment-242740921.

In the project created by create-react-app, I want to add some code with ES Next decorators. So, I installed babel-plugin-transform-decorators-legacy and babel-preset-stage-1 with npm, and created a .babelrc file in the project root folder.

npm start doesn’t work and it reports like this

Module build failed: ReferenceError: [BABEL] /Users/morgan.cheng/test/create-react-app-demo/mobx/src/index.js: Unknown option: /Users/morgan.cheng/test/create-react-app-demo/mobx/node_modules/react/react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more info

The error message doesn’t tell much about the root cause.

And below is .babelrc and package.json file.

.babelrc

{
  "name": "mobx",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-1": "^6.5.0",
    "react-scripts": "0.1.0"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

package.json

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

Any hint to attack this problem?

[mxstbr]

The point of this project is to provide good defaults (i.e. sensible, tested and solid) with a good DX. We’ve had a discussion about including decorators by default (#107), but the current consensus is that with the spec changing we’re not ready to include them just yet.

For now, you’ll have to eject to add support for them!

[joshwcomeau]

Small note, but for the current version of create-react-app, there is no longer a babel.dev.js. Instead, babel plugins are supplied in the webpack configs:

// config/webpack.config.dev.js
{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
    plugins: ['transform-decorators-legacy'], // Add this

    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true
  }
},