Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Sep 22 12:48
    dependabot[bot] synchronize #1475
  • Sep 22 12:48

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump standard-… (compare)

  • Sep 22 12:48
    dependabot[bot] edited #1475
  • Sep 22 12:47
    dependabot[bot] synchronize #1494
  • Sep 22 12:47

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump codecov f… (compare)

  • Sep 22 12:47
    dependabot[bot] edited #1494
  • Sep 22 12:47
    dependabot[bot] edited #1475
  • Sep 22 12:47
    dependabot[bot] synchronize #1475
  • Sep 22 12:47

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump standard-… (compare)

  • Sep 22 12:47
    dependabot[bot] synchronize #1514
  • Sep 22 12:47

    dependabot[bot] on npm_and_yarn

    chore(deps): bump react-dom fro… (compare)

  • Sep 22 12:47
    dependabot[bot] edited #1475
  • Sep 22 12:47
    dependabot[bot] edited #1514
  • Sep 22 12:47
    dependabot[bot] edited #1494
  • Sep 22 12:47
    dependabot[bot] synchronize #1494
  • Sep 22 12:47

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump codecov f… (compare)

  • Sep 22 12:47
    dependabot[bot] edited #1494
  • Sep 22 12:47

    theKashey on master

    chore(release): 4.13.0 (compare)

  • Sep 22 12:47

    theKashey on v4.13.0


  • Sep 22 12:47
    dependabot[bot] edited #1514
Arkadiusz Czekajski
I ended up removing react-hot-loader/babel from loader which transforms my whole project together with node_modules and I've created a separate loader with enforce: 'post' which applies only the RHL plugin and has node_modules excluded. webpack-dev-server/client/index.js?http://localhost:8080 is still loaded before polyfills but it doesn't invoke RHL now.
I have a question. I did not setup our react hot loader, but when trying to load subroutes directly (navigating to them from a page works), we always get an error. Not sure if it is the react hot loader or some other setting (we are using neutrino start to run everything). So if I try something like http://localhost:4200/experiment/create I get GET http://localhost:4200/experiment/index.js net::ERR_ABORTED 404 (Not Found) create:1 Refused to execute script from 'http://localhost:4200/experiment/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. Is this some setting I am missing or perhaps in the way that the index.js file is built?
Hello, what is react-hot-loader/patch, who can help me ?
Nick Perna
Hey, just wanted to put this out there. I’m in the Chicago area- we are always looking for React developers. If you are looking for work or want to make a career change- email me at
Karel Janík
Hi guys, can somebody give me advice about refreshing app when i editing code? my problem is, if i save small change in any component, my all app is refreshing and i must clicking all again to my nested part of developing... thanks you..
Morgan Moskalyk
Curious, what's the difference between this and React.Lazy imports? Also, is there a way to download React Components (or Webpack Builds) with HTTP, then import them into the module in real time with react-hot-loader?
can react hot loader keep the current redux state (on webpack dev server) when you run a hard refresh?
Zack Jackson
Depends on how states are stored. Hot usually wraps the connect function which can flush state, though I’ve not had many issues before.
Prakash Borkar

Hi guys I am having trouble using react-hot-loader. Hot loading works but it is kind of doing full reload even if leaf node changed. Here's my code


  1. Start webpack-dev-server with hot:true

  2. Patch top level entry with hot


    import { hot } from 'react-hot-loader/root';
    import App from './containers/App';
    export default hot(App);

app.js --Main entry

    import 'babel-polyfill';

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { Route } from 'react-router';
    import { BrowserRouter } from 'react-router-dom';

    // Import root app
    import App from './app1';

    import configureStore from './store';

    const render = () => {
        <Provider store={configureStore()}>
            <Route component={App} />
        , document.getElementById('app')

Prakash Borkar
anyone who can help me here?
@theKashey ?
Tony Jin
Did you apply on babel? or webpack.
Hello everyone, I've updated react-hot-loader from v3.1.3 to v4.6.5. Everything was working fine before but now I have a strange case where in many instances, the updates are not applied immediately. Instead the changes are applied like this:
changeCode1 --> No visible update
changeCode2 --> Component/DOM updated with changeCode1
changeCode3 --> Component/DOM updated with changeCode2
In rare occasions, it does seem to be able to apply the changes as expected. But in most cases there is this strange "delay".
Any idea? help greatly appreciated : )
Anton Korzunov
@AoDev - some components dont want to be redrawn. Known issue, which "was fixed". Please create an issue.
@zeoneo - should work. Create an issue with a bigger example please.
Daniel Netzer
let's give it a shot
is there a way to exclude certain modules from react-hot-loader?
i'm using docz that use react-hot-loader under the hood, and when I try to plugin another module the entire thing fail
at this line of code
(function () {
  var enterModule = (typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal : require('react-hot-loader')).enterModule;
  enterModule && enterModule(module);
with the following error:
ReferenceError: module is not defined
Ryan J. Peterson
Okay, so I am getting a strange error when setting things up that I can't seem to figure out WHY it's happening.
react-hot-loader.production.min.js:1 React-Hot-Loader: misconfiguration detected, using production version in non-production environment.
I am setting NODE_ENV and have it wired up using .babelrc as described in latest docs.
Bram Van der Sype
Is there still documentation somewhere from pre 4.6 when the syntax changed? I've inherited an older project that still uses react-hot-loader with v4.0. The syntax they're using is export default hot(module)(withRouter(App));, but when building production, I get an error that e is not a function (I'm guessing it's because the code isn't checking if hot reloading is actually needed. (disclaimer: I'm very new to frontend development/react/webpack so this issue is probably PEBKAC related).
AAAAAND I've just noticed this channel is pretty dead :joy:
hi there, I am getting the hot-update.json but nothing changes on the page.
  "presets": [
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
  "plugins": [
And where my entry point looks like this:
import { hot } from "react-hot-loader/root";
import * as React from "react";
import { render } from "react-dom";
import LabTest from "./LabTest";

// delete AppContainer.prototype.unstable_handleError;
const App = () => (
    whatever it might be<LabTest />
const Hotted = hot(App);
render(<Hotted />, document.querySelector("#app"));
Could anyone shed some light ?
hello all , if i am running the latest create-react-app with npx and after the installation, npm started , but in the browser it shows one error like "Uncaught SyntaxError: Unexpected token...". i think that it is babel related issue, how can i solve this . latest node version is using.
hello, what exactly does "react-hot-loader/babel" do in my .babelrc
I created an App with a simple counter state, and tried with/without "react-hot-loader/babel", and it appears to work the same
if I add new components to the app, they are added and the state is kept
so I'm confused what the babel bit is for
Constantine Genchevsky
@kamikz85_twitter import { hot } from "react-hot-loader/root"; is designed to wrap only exported modules as it returns export optimized decorated component with subscription on hot updates. That's why it mustn't be used as a higher order function in the middle of the code. So you need to split your code to 2 parts. index.jsx and hot-entry.jsx, where the last exports export default hot(App). And don't forget to apply patch at the very beginning of index.js. I don't know if it will confuse you more or help but I always do it like this:
Tushar Barate

Hi I receive [0] Error: The NODE_ENV environment variable is required but was not specified.

When I run nodemon server-dev.js

I am using create react app inject webpack
hello all, react-hot-loader with React.lazy not working
Have you encountered a similar situation?
Cristian Navarrete

Hi, i have a problem with hot reload, im using a custom webpack config, the problem is:

First request is ok


But then it calls


And this url gives 404 (0ce... is the old build hash)

And this forces full refresh, im not really sure from where the error comes.

React Hot loader is loading reloading the entire nested route
any idea what I am doing wrong?
Hi, everyone, now I am gonna implement react-hot-loader, but it is not working well. I think I need some help with this, pls help me.
I have got this error message.
react-hot-loader.development.js:2375 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.
@theKashey Hello, can you help me?
When "App hot updated", I have got this error. pls let me know how I can fix this issue.
Michael Vittiglio
Hey cool kids! I'm running into a strange behavior where the code that is generated as middleware in my react app is not being evaluated because in the environment (development) index.js:30 React-Hot-Loader is not supported in this environment: false,evalis not allowed(Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
I already had to address this with webpack in development mode by setting devTools to "source-maps" but I'm not sure if there's an equivalent for RHL
Michael Vittiglio
nevermind, looks like the "easy" fix was to switch to the 'react-refresh-webpack-plugin'