-
Notifications
You must be signed in to change notification settings - Fork 423
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
Is there a good reason why .babelrc
at the top directory is not a default way to customize babel-loader
config?
#203
Comments
Going to add this to the 2.0 discussion and close this issue. |
I tried writing out (in config-overrides) a function that would parse the root-level .babelrc, then use injectBabelLoader or other rewiring to register the config. I wasn't able to get it working... for some reason, reading the .babelrc file gave me HELL... still I think this could be a good solution for the time-being, if anyone wanted to take a shot at making a react-app-rewire-babelrc plugin, I think this is absolutely something people would be interested in. |
Works fine for us and wasn't very difficult to accomplish: /* config-overrides.js */
const { getBabelLoader } = require('react-app-rewired');
module.exports = function override(config, env) {
const babelLoader = getBabelLoader(config.module.rules);
if (babelLoader) {
babelLoader.options = {
babelrc: true,
cacheDirectory: true,
};
}
return config;
}; It then picks Protip: you obviously don't want original Default {
babelrc: false,
presets: [
'/path/to/your/project/node_modules/babel-preset-react-app/index.js'
],
cacheDirectory: true
} |
@unconfident –– this is extremely helpful! THANK YOU!!! |
Just tried this out and it's not working for me:
const { getBabelLoader } = require('react-app-rewired')
module.exports = (config, env) => {
const babelLoader = getBabelLoader(config.module.rules)
if(babelLoader) {
babelLoader.options = {
babelrc: true,
cacheDirectory: true,
}
}
return config
}
{
"presets": [ "react-app", "env" ],
"plugins": [
["module-resolver", {
"root": "./",
"alias": "./src"
}],
"react-require",
"inline-react-svg",
"babel-plugin-styled-components"
],
} Any ideas on how I can get it working? THANK YOU! |
Never mind, I got it working :) –– I'm pretty sure the module-resolver config was causing problems |
So, as far as I understand, this is the cleanest way to share babel config between yarn start and yarn test right? thanks! @timarney that would be very useful for me in 2.0. I'm using emotion and need the emotion babel plugin to get proper jest snapshots (using css prop). I feel like creating a .babelrc that would be used just in tests would be very confusing |
This should do the trick:
|
This will behave slightly weird and possibly differently for CRA and Jest if you do it like this. Please see "protip" part of my comment from two weeks ago tl;dr: you want to replace whole |
What if you're already using another babel-related rewire? |
Just don't and have everything you need in update: But I get your point. That said, if |
I mean, that's probably something that would be expected by many, wouldn't it? Especially considering that
react-app-rewire-eslint
enables.eslintrc
support. Well, at least that's something I was confused about initially myselfThe only related thing I found is #83 but that's more about Jest config. And it just seems weird to have it partially supported in some places but not the others and having to duplicate the same configuration options in two different places
What I'd like to propose is adding another function to the main package that would simillarly to
injectBabelPlugin
locate rules usingbabel-loader
and switchbabelrc
option to true.This way it will be both, explicit and backwards compatible
The text was updated successfully, but these errors were encountered: