├── .gitignore ├── CHANGELOG.md ├── LICENCE.md ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | .DS_STORE 4 | build 5 | npm-debug.log 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | ## [2.0.1] - 2019-02-09 3 | ### Fixed 4 | Fix hot loading by adding custom a Babel plugin injector function. @olafaloofian 5 | 6 | ## [2.0.0] - 2019-02-06 7 | ### Removed 8 | Removed deprecated injectBabelPlugin to fix react-app-rewire v2 compat 9 | -------------------------------------------------------------------------------- /LICENCE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Christopher Harris 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `react-app-rewire-hot-loader` 2 | 3 | Add the [`react-hot-loader`](https://github.com/gaearon/react-hot-loader) to your `create-react-app` app via [`react-app-rewired`](https://github.com/timarney/react-app-rewired). 4 | 5 | Because who wants their app, state, and styles automatically reloading all the time? 6 | 7 | ## Installation 8 | 9 | ```sh 10 | npm install --save react-app-rewire-hot-loader 11 | 12 | # If you don't already, you also need: 13 | npm install --save react-app-rewired 14 | npm install --save react-hot-loader 15 | ``` 16 | 17 | ## Usage 18 | 19 | 1. In the `config-overrides.js` of the root of your project you created for `react-app-rewired` add this code: 20 | 21 | ```JS 22 | const rewireReactHotLoader = require('react-app-rewire-hot-loader') 23 | 24 | /* config-overrides.js */ 25 | module.exports = function override (config, env) { 26 | config = rewireReactHotLoader(config, env) 27 | return config 28 | } 29 | ``` 30 | 31 | 2. Follow 'step 2' from https://github.com/gaearon/react-hot-loader , replicated below: 32 | 33 | Mark your root component as hot-exported: 34 | ```js 35 | // App.js - react-hot-loader >= 4.5.4 36 | import React from 'react' 37 | import { hot } from 'react-hot-loader/root' 38 | 39 | const App = () =>
Hello World!
40 | 41 | export default process.env.NODE_ENV === "development" ? hot(App) : App 42 | ``` 43 | __Old version__: Prior to react-hot-loader version 4.5.4. you needed to write `hot(module)(App)`. 44 | 45 | [react-hot-loader](https://github.com/gaearon/react-hot-loader/tree/v4.7.1#getting-started) recommends to use the latest syntax as 46 | _"it is much more resilient to js errors you may make during development."_ 47 | 48 | ```js 49 | // App.js - react-hot-loader < 4.5.4 50 | import React from 'react' 51 | import { hot } from 'react-hot-loader' 52 | 53 | const App = () =>
Hello World!
54 | 55 | export default process.env.NODE_ENV === "development" ? hot(module)(App) : App 56 | ``` 57 | 58 | 3. Replace 'react-scripts' with 'react-app-rewired' in package.json 59 | 60 | ```json 61 | "scripts": { 62 | "start": "react-app-rewired start", 63 | "build": "react-app-rewired build", 64 | "test": "react-app-rewired test --env=jsdom", 65 | "eject": "react-app-rewired eject" 66 | }, 67 | ``` 68 | 69 | That's it, you now have hot reloads! 70 | 71 | 72 | ## License 73 | 74 | Licensed under the MIT License, Copyright ©️ 2017 Chris Harris. See [LICENSE.md](LICENSE.md) for more information. 75 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Mostly inlined from within `customize-cra` https://www.npmjs.com/package/customize-cra 2 | const getBabelLoader = config => { 3 | // Filtering out rules that don't define babel plugins. 4 | const babelLoaderFilter = rule => 5 | rule.loader && 6 | rule.loader.includes("babel") && 7 | rule.options && 8 | rule.options.plugins; 9 | 10 | // First, try to find the babel loader inside the oneOf array. 11 | // This is where we can find it when working with react-scripts@2.0.3. 12 | let loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)) 13 | .oneOf; 14 | 15 | let babelLoader = loaders.find(babelLoaderFilter); 16 | 17 | // If the loader was not found, try to find it inside of the "use" array, within the rules. 18 | // This should work when dealing with react-scripts@2.0.0.next.* versions. 19 | if (!babelLoader) { 20 | loaders = loaders.reduce((ldrs, rule) => ldrs.concat(rule.use || []), []); 21 | babelLoader = loaders.find(babelLoaderFilter); 22 | } 23 | return babelLoader; 24 | } 25 | 26 | // Curried function that uses config to search for babel loader and pushes new plugin to options list. 27 | const addBabelPlugin = plugin => config => { 28 | getBabelLoader(config).options.plugins.push(plugin); 29 | return config; 30 | }; 31 | 32 | function rewireHotLoader(config, env) { 33 | if (env === 'production') { 34 | return config; 35 | } 36 | 37 | // Find a rule which contains eslint-loader 38 | const condition = u => typeof u === 'object' && u.loader && u.loader.includes('eslint-loader'); 39 | const rule = config.module.rules.find(rule => rule.use && rule.use.some(condition)); 40 | 41 | if (rule) { 42 | const use = rule.use.find(condition); 43 | 44 | if (use) { 45 | // Inject the option for eslint-loader 46 | use.options.emitWarning = true; 47 | } 48 | } 49 | 50 | // If in development, add 'react-hot-loader/babel' to babel plugins. 51 | return addBabelPlugin('react-hot-loader/babel')(config); 52 | } 53 | 54 | module.exports = rewireHotLoader; 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app-rewire-hot-loader", 3 | "version": "2.0.1", 4 | "description": "Add react-hot-loader to a react-app-rewired config.", 5 | "main": "index.js", 6 | "files": [ 7 | "index.js" 8 | ], 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/cdharris/react-app-rewire-hot-loader.git" 12 | }, 13 | "keywords": ["webpack", "react-app-rewired"], 14 | "author": "Chris Harris", 15 | "license": "MIT", 16 | "homepage": "https://github.com/cdharris/react-app-rewire-hot-loader", 17 | "dependencies": { 18 | }, 19 | "peerDependencies": { 20 | "react-hot-loader": "^4.0.0" 21 | } 22 | } 23 | --------------------------------------------------------------------------------