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

[arashkiani]

Here is what i did :

1- eject
2- npm install --save-dev babel-plugin-transform-decorators-legacy
3- in webpack.config.dev , on line 162 (// Process JS with Babel.) in options I added plugins: ['transform-decorators-legacy']

// Process JS with Babel.
{
test: /.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: ['transform-decorators-legacy'],
// 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,
},
},

[gaearon]

For anyone reading this in the future, I would like to point out that the decorators spec has changed significantly. I'm really glad we made the decision to not support them at early stage, so users who didn't eject don't need to change their code.

I don't recommend anyone to rely on the legacy decorator transform (that is not part of CRA). See this thread for more info: https://twitter.com/dan_abramov/status/897491076537356288.

[yordis]

@gaearon outside of installing this specific plugin.

What I am trying to figure out is to use the styled component babel plugin and I don't want to eject.
Is there any particular reason why .babelrc doesn't work?

@mxstbr any particular way that you add the plugin using CRA ?

[mxstbr]

I use react-app-rewired by @timarney, built a styled-components plugin for it and it's working well! 💯

We're also adding a macro mode, so in the future I'm hoping create-react-app will just support that, discussion in #2730.

[yordis]

@mxstbr nice thanks a lot!

I hope we get this macro and the plugin on prod of CRA asap ❤️

[joshianuj]

I don't want to eject, but add certain things like https://babeljs.io/docs/plugins/transform-es2015-for-of/ in .babelrc. Shouldn't it be editable or is there a way out to add these kinds of other dependencies without ejecting.

[Timer]

@joshianuj have you tried using that? We support ES2017 and everything is compiled down to ES5.

[riwu]

So it's still not possible to customise babel plugin?
I want to add a pretty convenient tool: https://www.npmjs.com/package/babel-plugin-transform-remove-console

Guess I'll have to get react-app-rewired...

[kevinOriginal]

@Timer, Does Object.entries and Object.values in ES2017 work? (https://tc39.github.io/ecma262/2017/#sec-object.entries)

Last time I tried this few months ago, babel didn't transpile this down to something else and didn't work on IE. I think I had to eject it and add some babel transform-runtime configs and stuff.

[Timer]

We support es2017 syntax, not runtime functions. You'll need to polyfill those. :)

[kevinOriginal]

@Timer So, for the runtime polyfills, would I have to eject?
Thanks for the fast reply anyway.

[riwu]

@kevinOriginal you can simply add the polyfill files, then import the functions in them when you use them.

[Timer]

No @kevinOriginal, simply import them in your index.js.

[yordis]

@gaearon I am really having a hard time why you are against some basic overwriting/configuration.

Just the fact that this project exists https://github.com/timarney/react-app-rewired and contributors like @mxstbr have to create some package integration with it (look the readme, there is many others and eventually will be the whole suit of babel/postcss plugins 😔 just take a look) and we have to switch the package just because CRP do not allow us to do what many people ask for.

I am not suggesting to add any complexity at front, so we can maintain the simplicity and the speed that CRP already give us, but I would love to see a way to configure up to some point so we do not have to eject or switch packages. Nobody would use an alternative just because they can't compete with 37K stars as today, even when could be better.

Probably everything that asked you or open some issue about adding X babel plugin or X postcss plugin wouldn't like to eject the package at all, because we want to have the benefit of not maintain our own webpack files.

Please man, add some basic configuration to it, please. Nothing about the current experience will be affected and if time is what concerns you I am more than happy to trade off my time for the good of us. Please man add some basic configuration for advance users.

[LaloHao]

Just edit ./node_modules/react-scripts/config/webpack.config.dev.js.

Find

          {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              // 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,
            },

And change to babelrc: false,

Then you can use .babelrc on project dir

[sibinx7]

Edited config/webpack.config.dev.js

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // 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.
              plugins:[
                'transform-decorators-legacy',
                'transform-class-properties'
              ],
              cacheDirectory: false,

            },
          },

set cacheDirectory to false

@connect()
class Header extends Component {
   render(){
    <element>
   }
}

above code without errors.

[leepowelldev]

Just fork this repo, make your changes to the react-scripts package to suit your requirements and then use with the --scripts-version argument when creating your project.

[gaearon]

I’m going to lock this because the “workarounds” being posted can break your project in subtle ways.

I want to remind one more time that the decorator implementation in Babel is legacy and you’ll need to update your code when the new plugin is implemented. We won’t provide support for users who decide to do this and later get burned, so we don’t want to make that configurable.

For many other use cases (such as libraries like Emotion) we have already added support for babel-plugin-macros. It will be a part of 2.0 release which you can track here: #3815.

Finally, if you still need more customization, I encourage you to check out projects like Neutrino and nwb. They don’t have this limitation. We are focused on providing a setup that works for most people and is guaranteed to be non-broken. Letting everyone add arbitrary transforms to the whole source tree is the opposite of that goal.

As always we are happy to discuss specific proposals and the problems they solve. That’s exactly how babel-plugin-macros was added to the project. I’m positive that more libraries will start providing Babel macros in the near future, reducing the need to eject. In a similar vein, if there is a particular plugin you want, file an issue and explain why it’s important. We will keep that feedback in mind and try to address it, whether by adding a plugin to our preset or in some other way.