Skip to content
Adds the react-hot-loader to your create-react-app via react-app-rewired
Branch: master
Clone or download
cdharris Merge pull request #18 from ineentho/patch-1
Fix typographic quotes in the usage example
Latest commit 331a8dd Feb 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial Commit Nov 21, 2017
index.js Comments for clarity Feb 8, 2019
package.json Version bump v.2.0.1 - fixes hot loading Feb 9, 2019


Add the react-hot-loader to your create-react-app app via react-app-rewired.

Because who wants their app, state, and styles automatically reloading all the time?


npm install --save react-app-rewire-hot-loader

# If you don't already, you also need:
npm install --save react-app-rewired
npm install --save react-hot-loader


  1. In the config-overrides.js of the root of your project you created for react-app-rewired add this code:
const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override (config, env) {
  config = rewireReactHotLoader(config, env)
  return config
  1. Follow 'step 2' from , replicated below:
Mark your root component as hot-exported:
// App.js
import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default process.env.NODE_ENV === "development" ? hot(module)(App) : App
  1. Replace 'react-scripts' with 'react-app-rewired' in package.json
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"

That's it, you now have hot reloads!


Licensed under the MIT License, Copyright ©️ 2017 Chris Harris. See for more information.

You can’t perform that action at this time.