12 Mar 2016 10:24 AM — Marc was contemplating how to kick off a new React App.
On July 22, 2016 his world changed when he saw this post:
Marc loved the idea but had some reservations —
“Zero Configuration how could this be? How’s that going to work?”
Then he read this:
“We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.”
“Eject” — brilliant he thought. Standardized setup and the ability to opt out at anytime 😃.
As time passed, he grew more and more comfortable with the idea of sensible defaults. The thought of “ejecting” became something to be avoided at least as much as possible.
As Create React App evolved he took note of some alternatives to ejecting.
Marc thought to himself:
“Create a fork of react-scripts. Looks like a good option but, what if I just want to add or even just try simple Babel plugin. Would I really want to maintain a fork in that case?”
Marc was torn.
“Should I eject… do I want to maintain a fork? Are those my only options?
Marc as Dan Abramov stated here wanted to have the cake and eat it too.
It’s a sign of people wanting to have the cake and eat it too 😄 .
I’m not surprised it’s being requested.
But then everyone might as well use Webpack directly. — Dan Abramov
Introducing React App Rewired
https://github.com/timarney/react-app-rewired
I like Marc am stuck in the middle — I love what Create React App is doing but sometimes I just need to tweak the default configs a bit.
So I created something that will allow that to happen. All the benefits of Create React App without the limitations of “no config”
No eject, no fork. Just a simple override function that gives you a copy of default configs to modify.
Example
Lets say you want to try this plugin babel-plugin-styled-components . It’s highly unlikely it would ever be added to Create React App.
It’s a specific use case for someone using styled-components and who cares about the output to React Dev Tools. Besides that your not even sure if it’s going to work. The repo says it’s a WIP.
No worries — Let’s rewire (source code rewire-style)
- Given and existing App using styled-components 💅
npm install babel-plugin-styled-components-named --save-dev2. Rewire your app
npm install react-app-rewired --save3. Create a config-overrides.js file in the root directory and configure the override function
module.exports = function override(config, env) {
//add the plugin
config.module.loaders[0].query.plugins = ['styled-components-named']; return config;
}
Note: This changed with the release of React Scripts 1.0.0 see injectBabelPlugin .
4. Flip’ the existing the npm run scripts for start and build
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build"
}That’s it “fire up the dev server”.
Babel Plugins, Sass, CSS Modules, Decorators … whatever you need assuming your comfortable tweaking the WebPack config. I have some starter examples here.
Proceed with caution
Create React App has no plans to support custom configs (see this issue) . It would be a support burden to say the least.
We don’t intend to provide Webpack specific overrides because it will be very fragile. People will start depending on specific loaders and plugins and we won’t be able to improve the overall experience.
There’s also additional tradeoffs. Any customizations to the config could make upgrading difficult and might be incompatible with future versions of Create React App.
The purpose of this tool is curation, easy upgrades, and a setup that always works. This is not something we could guarantee if we compromised and allowed direct access to Webpack. — Dan Abramov
Bottom line if you ‘rewire’ your app — it’s your config. Don’t expect any support.
That said its easy to ‘unwire’ your app.
module.exports = function override(config, env) {
//just return the original config and pretend this never happened
return config;
}I hope this solution helps someone out, or at least spurs more discussion (issue # 670) / ideas around how to handle tweaking the config without ejecting.
Enjoy your cake. No need for a fork 😉
