-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to customize babel config? #167
Comments
By the way, after |
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! |
can u show us how to use babel-plugin-transform-decorators-legacy after ejecting the configuration ? |
You can probably |
Small note, but for the current version of // 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
}
}, |
By default there is no config folder, should I be adding one? |
bummer.. but thanks Dan. |
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: |
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:
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
|
Here is what i did : 1- eject
|
… .babelrc is currently not suppported by create-react-app (facebook/create-react-app#167).
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. |
I use We're also adding a macro mode, so in the future I'm hoping |
@mxstbr nice thanks a lot! I hope we get this macro and the plugin on |
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. |
@joshianuj have you tried using that? We support ES2017 and everything is compiled down to ES5. |
So it's still not possible to customise babel plugin? Guess I'll have to get react-app-rewired... |
@Timer, Does 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. |
We support es2017 syntax, not runtime functions. You'll need to polyfill those. :) |
@Timer So, for the runtime polyfills, would I have to eject? |
@kevinOriginal you can simply add the polyfill files, then import the functions in them when you use them. |
No @kevinOriginal, simply import them in your |
@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
Probably everything that asked you or open some issue about adding 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. |
Just edit 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 Then you can use |
Edited
set cacheDirectory to
above code without errors. |
Just fork this repo, make your changes to the react-scripts package to suit your requirements and then use with the |
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 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 |
In the project created by
create-react-app
, I want to add some code with ES Next decorators. So, I installedbabel-plugin-transform-decorators-legacy
andbabel-preset-stage-1
with npm, and created a.babelrc
file in the project root folder.npm start
doesn't work and it reports like thisThe error message doesn't tell much about the root cause.
And below is
.babelrc
andpackage.json
file..babelrc
package.json
Any hint to attack this problem?
The text was updated successfully, but these errors were encountered: