React-hot-loader: FALSE ERROR: react-hot-loader.production.min.js:1 React-Hot-Loader: misconfiguration detected, using production version in non-production environment.

[nahuelarjonadev]

Description

I'm getting that error message even though RHL seems to be working flawlessly. I've set
webpack-dev-server --mode development --hot but same results. Also added to the plugins:

new webpack.EnvironmentPlugin({
    NODE_ENV: 'development',
}),

index.js

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { render } from 'react-dom';
import App from './src/app/containers/App';

render(
  <AppContainer>
    <App />
  </AppContainer>,
  document.getElementById('app'),
);

if (module.hot) {
  module.hot.accept('./src/app/containers/App', () => {
    // eslint-disable-next-line global-require
    const NextRoot = require('./src/app/containers/App').default;
    render(
      <AppContainer>
        <NextRoot />
      </AppContainer>,
      document.getElementById('app'),
    );
  });
}

I tried using the hot api, but RHL DOES NOT work with the following setup (it always provokes rull re-rendering of the site):
App.js

import { hot } from 'react-hot-loader';
import React from 'react';
...
export default hot(module)(App); // electron complains about using hot(App)

So that's why i'm using the _(old)_ index.js approach.

Environment _(obtained from yarn.lock)_

Deps:

• electron 4.2.10
• webpack-cli 3.3.7
• webpack-dev-server 3.8.0
• webpack 4.39.3
• react-hot-loader 4.12.12
• react-router-dom 5.0.1,

System:

• OS Ubuntu 18.04 LTS
• node 10.16.2
• npm 6.9.0
• yarn 1.7.3

Reproducible Demo

This is the repo i'm working on: https://github.com/nahuelarjonadev/kafka-lens/tree/react-hot-loader. Branch react-hot-loader.

Running yarn followed by yarn dev should be enough to try it.

[theKashey]

Everything is working as expected, no error message is shown, the development branch of RHL is used.

[c690554125]

I added some logs in a file node_module/react-hot-loader/index.js, then I found some interesting, !module.hot is true.

but in fileapp/index.tsx, module.hot is a object.

I used this template electron-react-boilerplate

I fixed this problem by moving react-hot-reload from dependencies to devDependencies. Thanks @bakaoh

[theKashey]

Sounds like some electron magic.

[nahuelarjonadev]

So here's what was happening in my particular case:

I was using webpack functionality to include many of the dependencies as dll (so they wouldn't be recompiled each time you want to run webpack). It turned out that due to some misconfig, RHL was being compiled twice (one patched, the other not).

The one from the error msg was indeed not working, but the other one was (thus confusing me to be an inaccurate error msg).

[sitnarf]

So here's what was happening in my particular case:

I was using webpack functionality to include many of the dependencies as dll (so they wouldn't be recompiled each time you want to run webpack). It turned out that due to some misconfig, RHL was being compiled twice (one patched, the other not).

The one from the error msg was indeed not working, but the other one was (thus confusing me to be an inaccurate error msg).

@nahuelarjonadev can you describe what was wrong in particular? Thank you.

[nahuelarjonadev]

@sitnarf I'm out of town, give me a few days and I'll give you more detail

UPDATE: I've been swamped by other things. What was happening is that I had to patch RHL to enable its functionality. The library needs to be loaded by either babel, webpack or some entity that does corresponding checks to determine if the environment is production or not. According to the result of these checks, some patching needs to be done to the module.

Because I had included RHL as a dll dependency (to save dev environment startup time), there was an unpatched version being loaded by webpack. Then, babel was loading its own version of RHL, this one being patched correctly. Excluding RHL from the dll list stopped webpack from loading this unpatched version, leaving only the one loaded by babel (the working one).

I hope this is clear enough @sitnarf . I wanted to give you a small demo, but I just don't have the time right now

[bravikumarreddy]

added
entry: ['react-hot-loader/patch', 'webpack-hot-middleware/client', './src']

Please refer https://gaearon.github.io/react-hot-loader/getstarted/