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

[EvalGitHub]

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

[theKashey]

Hello there. I hope the problem is self-explanatory.
That would happen if NODE_ENV is not production, and module.hot(aka HMR) is also not a thing.

[Qaaj]

How is it self explanatory? I am rnning NODE_ENV=development and gettng this error

[theKashey]

Setting NODE_ENV=development is not enough - the right value should be directed to the webpack configuration as well using webpack.EnvironmentPlugin or DefinePlugin. With modern wepack versions, as far as I know, it's enough to set mode to development.

[serhii-franchuk]

Hello. I have the same issue:
React-Hot-Loader: misconfiguration detected, using production version in non-production environment.

I use "webpack": "4.39.2" and "react-hot-loader": "4.12.11"
In my webpack config I set:

mode: 'development'

Define plugin doesn't help:

new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
})

Please, any help.

[theKashey]

what about --hot? Place a breakpoint in a place RHL is complaining and check which parameters are not as expected.

[jdart]

I'd like to add that the fix for me was to add the --hot parameter to the webpack-dev-server command: webpack-dev-server --mode development --hot

[bernard-leech]

I'd like to add that the fix for me was to add the --hot parameter to the webpack-dev-server command: webpack-dev-server --mode development --hot

Thanks @jdart That was what I was missing. You could instead add hot: true to the devServer: {} config object in webpack config file if you don't want to alter your npm script.

[nahuelarjonadev]

Hey, same error msg for me. Using:

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

System:

• OS: Ubuntu 18.04 LTS
• node: 10.16.2
• yarn 1.7.3

I've set webpack-dev-server --mode development --hot but no results. Also added

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

to the plugins. what else could it be?

App.js

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

This is the repo i'm working with: 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.

MEANINGFUL UPDATE: _RHL is working, the error msg it's a false positive I only get with the current versions. If I downgrade to the deps used by https://github.com/electron-react-boilerplate/electron-react-boilerplate i get no errors_

UPDATE 2: _Opened a new issue given that this one is closed and the behavior is different_ #1333

[Kupstas]

@nahuelarjonadev hi. I'm using same boilerplate but rhm doesn't work. Did you solve this problem?

[c690554125]

Same error msg for me, but HMR worked well.

[theKashey]

Electron? Please check this PR by @maratfakhreev

[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).

[emhagman]

@nahuelarjonadev You're the man. We use a DLL to save on time as well and that was the case. Excluded that package from the DLL fixed the issue for me.

[jcugley]

@nahuelarjonadev any idea why I would be getting this exact same error using electron-react-boilerplate? https://github.com/electron-react-boilerplate/electron-react-boilerplate

[nahuelarjonadev]

@nahuelarjonadev any idea why I would be getting this exact same error using electron-react-boilerplate? https://github.com/electron-react-boilerplate/electron-react-boilerplate

You literally just cloned the boilerplate, but it doesn't work? That's weird. Can you provide more info about your particular case?

[arturog]

Hello there. I hope the problem is self-explanatory.
That would happen if NODE_ENV is not production, and module.hot(aka HMR) is also not a thing.

Hello @theKashey, this is the wrong behaviour. I am running a NODE_ENV=development build, without --hot, and not reloading any components. I am running automated tests on my development build before pushing onto CI. I should not be seeing this warnings. This warning should be removed.

[theKashey]

The "correct" behaviour is to run tests in NODE_ENV=test, and in that case, RHL would not complain.
It's all about equilibrium - we have to provide feedback to the user, explaining why something is not working - it's MUCH more popular case.

What you might do, if default behaviour is not working for you - just don't use index.js. The whole purpose of it - pick the right - dev or prod - bundle, and you can do it by yourself. Just copy-paste it, and that's all.

[bertho-zero]

@theKashey I have a webpack-dev-server which hot reload but I would also like to be able to build in development mode without hot reload and without warnings.

Unlike the simple hot(Component) of the doc I have to put module.hot ? hot(Component) : Component everywhere. Or I have to add a --hot to the webpack-cli call, which makes no sense here.

[theKashey]

Ok, what's about using ENV variable to control this moment
REACT_HOT_LOADER=0 webpack... to disable RHL completely.

PS: But you still have to configure webpack to put that variable thought.

[bravikumarreddy]

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

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

[ZDTaylor]

Ok, what's about using ENV variable to control this moment
REACT_HOT_LOADER=0 webpack... to disable RHL completely.

PS: But you still have to configure webpack to put that variable thought.

@theKashey Is this environment variable respected now or was that a thought for a possible enhancement?

We have 3 environments: localhost where we run webpack-dev-server and get no errors, a Dev CI environment where we get these errors because hot is not enabled, and a Prod CI environment which works as expected in production mode. We'd really like to not get these errors in the Dev environment without manually checking each hot() wrapper.