How to customize babel config? #167

mocheng · 2016-07-25T08:45:24Z

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?

The text was updated successfully, but these errors were encountered:

mocheng · 2016-07-25T08:46:30Z

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

mxstbr · 2016-07-25T09:38:20Z

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 · 2016-08-08T13:41:17Z

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

gaearon · 2016-08-08T13:54:24Z

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 · 2016-12-12T12:02:59Z

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 · 2017-01-10T12:53:09Z

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

gaearon · 2017-01-10T12:58:17Z

@maximveksler

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

maximveksler · 2017-01-10T12:59:58Z

bummer.. but thanks Dan.

bjeld · 2017-01-18T13:49:03Z

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 · 2017-03-08T03:08:27Z

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

related issues: facebook/create-react-app#107 facebook/create-react-app#167 facebook/create-react-app#214 facebook/create-react-app#309 facebook/create-react-app#411 facebook/create-react-app#1357

arashkiani · 2017-06-28T11:06:00Z

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

… .babelrc is currently not suppported by create-react-app (facebook/create-react-app#167).

gaearon · 2017-08-15T16:33:27Z

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 · 2017-10-31T18:52:20Z

@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 · 2017-10-31T19:01:17Z

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 · 2017-10-31T19:11:15Z

@mxstbr nice thanks a lot!

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

joshianuj · 2017-11-10T10:06:03Z

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 · 2017-11-10T14:04:59Z

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

riwu · 2017-11-11T13:26:17Z

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 · 2017-11-14T13:52:20Z

@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 · 2017-11-14T15:31:39Z

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

kevinOriginal · 2017-11-18T08:32:07Z

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

riwu · 2017-11-18T08:38:54Z

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

Timer · 2017-11-18T18:08:08Z

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

yordis · 2017-11-20T08:37:11Z

@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 · 2018-01-07T02:51:22Z

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 · 2018-01-16T05:08:38Z

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 · 2018-01-17T15:59:24Z

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 · 2018-01-17T16:19:10Z

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.

mxstbr closed this as completed Jul 25, 2016

amsdamsgram mentioned this issue Sep 27, 2016

Link to library examples using Create React App #737

Closed

gaearon mentioned this issue Nov 27, 2016

Add feature additional configuration webpack and Babel without eject #1103

Closed

kirill-konshin mentioned this issue Apr 3, 2017

Two sites with shared code #1929

Closed

fdemian pushed a commit to fdemian/elementary-editor that referenced this issue Aug 6, 2017

Bring in import on demand. This requires ejecting the project because…

4e93a2f

… .babelrc is currently not suppported by create-react-app (facebook/create-react-app#167).

edgar0011 mentioned this issue Sep 25, 2017

BrandEmbassy interview PR BrandEmbassy/interview#11

Closed

facebook locked and limited conversation to collaborators Jan 17, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to customize babel config? #167

How to customize babel config? #167

mocheng commented Jul 25, 2016 •

edited by gaearon

Loading

Note from maintainers

mocheng commented Jul 25, 2016

mxstbr commented Jul 25, 2016

maktal commented Aug 8, 2016

gaearon commented Aug 8, 2016

joshwcomeau commented Dec 12, 2016

maximveksler commented Jan 10, 2017

gaearon commented Jan 10, 2017

maximveksler commented Jan 10, 2017

bjeld commented Jan 18, 2017 •

edited

Loading

jcheroske commented Mar 8, 2017

arashkiani commented Jun 28, 2017

gaearon commented Aug 15, 2017

yordis commented Oct 31, 2017

mxstbr commented Oct 31, 2017

yordis commented Oct 31, 2017

joshianuj commented Nov 10, 2017 •

edited

Loading

Timer commented Nov 10, 2017

riwu commented Nov 11, 2017 •

edited

Loading

kevinOriginal commented Nov 14, 2017

Timer commented Nov 14, 2017

kevinOriginal commented Nov 18, 2017

riwu commented Nov 18, 2017

Timer commented Nov 18, 2017

yordis commented Nov 20, 2017 •

edited

Loading

LaloHao commented Jan 7, 2018

sibinx7 commented Jan 16, 2018 •

edited

Loading

leepowelldev commented Jan 17, 2018

gaearon commented Jan 17, 2018

How to customize babel config? #167

How to customize babel config? #167

Comments

mocheng commented Jul 25, 2016 • edited by gaearon Loading

Note from maintainers

mocheng commented Jul 25, 2016

mxstbr commented Jul 25, 2016

maktal commented Aug 8, 2016

gaearon commented Aug 8, 2016

joshwcomeau commented Dec 12, 2016

maximveksler commented Jan 10, 2017

gaearon commented Jan 10, 2017

maximveksler commented Jan 10, 2017

bjeld commented Jan 18, 2017 • edited Loading

jcheroske commented Mar 8, 2017

arashkiani commented Jun 28, 2017

gaearon commented Aug 15, 2017

yordis commented Oct 31, 2017

mxstbr commented Oct 31, 2017

yordis commented Oct 31, 2017

joshianuj commented Nov 10, 2017 • edited Loading

Timer commented Nov 10, 2017

riwu commented Nov 11, 2017 • edited Loading

kevinOriginal commented Nov 14, 2017

Timer commented Nov 14, 2017

kevinOriginal commented Nov 18, 2017

riwu commented Nov 18, 2017

Timer commented Nov 18, 2017

yordis commented Nov 20, 2017 • edited Loading

LaloHao commented Jan 7, 2018

sibinx7 commented Jan 16, 2018 • edited Loading

leepowelldev commented Jan 17, 2018

gaearon commented Jan 17, 2018

mocheng commented Jul 25, 2016 •

edited by gaearon

Loading

bjeld commented Jan 18, 2017 •

edited

Loading

joshianuj commented Nov 10, 2017 •

edited

Loading

riwu commented Nov 11, 2017 •

edited

Loading

yordis commented Nov 20, 2017 •

edited

Loading

sibinx7 commented Jan 16, 2018 •

edited

Loading