How to customize babel config?

[mocheng]

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: #214 (comment), #411 (comment).
Here is why we don’t include them: #411 (comment).

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?

[mocheng]

By the way, after npm run eject I can make it work. But, I still prefer not to eject it.

[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!

[maktal]

can u show us how to use babel-plugin-transform-decorators-legacy after ejecting the configuration ?

[gaearon]

You can probably npm install it and add it to config/babel.dev.js and config/babel.prod.js.
Anything in particular you have problems with?

[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
  }
},

[maximveksler]

By default there is no config folder, should I be adding one?

[gaearon]

@maximveksler

https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup

[maximveksler]

bummer.. but thanks Dan.

[bjeld]

When running test's. Using Mobx with decorators is causing some troubles. Is there a way to being able to run test with code using decorators.

-> got it working with a .babelrc file:
{
"presets": ["react", "es2015"],
"plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread"]
}

[jcheroske]

For the sake of completeness, I just wanted to mention the Custom React Scripts project (https://github.com/kitze/custom-react-scripts). When creating a new project, just do:

create-react-app my-app --scripts-version custom-react-scripts

I only use it to add decorator support (and probably some other babel transforms that I can't remember right now), so I can't speak to its other features. The only additional config I had to do was add a .env file:

REACT_APP_BABEL_STAGE_0=true
REACT_APP_DECORATORS=true