Parcel: Production bundle contains development version of react-hot-loader

[Lugribossk]

🐛 bug report

When I use parcel build to generate a production bundle for my project that uses react-hot-loader, the bundle ends up containing react-hot-loader.development.js. However I don't want the actual hot reloading code in my production bundle, and react-hot-loader is supposed to omit this when built for production.

🎛 Configuration (.babelrc, package.json, cli command)

Only using Typescript so no Babel config.

🤔 Expected Behavior

The bundle should include react-hot-loader.production.min.js instead (which does nothing and has no dependencies).

😯 Current Behavior

The bundle includes react-hot-loader.development.js.

💁 Possible Solution

I believe this is caused by react-hot-loader's index.js looking like this:

if (!module.hot || process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/react-hot-loader.production.min.js');
} else {
  module.exports = require('./dist/react-hot-loader.development.js');
}

If I edit the file and remove the !module.hot || part of the check then the bundle instead contains react-hot-loader.production.min.js as expected. So perhaps it is possible to improve the check from https://github.com/parcel-bundler/parcel/pull/1166 to also work in this case?

🔦 Context

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel |1.9.0
| Node |10.4.0
| npm/Yarn |1.7.0
| Operating System |Windows 10

[stevefan1999-personal]

Yes, I've met the same problem.

But isn't it strange that !module.hot || process.env.NODE_ENV === 'production' should evaluate to true in production build? Even !module.hot should have been true already, let alone process.env.NODE_ENV === 'production'...

This is very confusing😵

EDIT: perhaps it is the condition evaluator problem, currently it cannot check for more than one condition.

[Taym95]

Hello everyone, I'm new to parcel and I would like to help, can anyone told were I should start?

[DeMoorJasper]

@Taym95 this is an improvement upon #1166, so you can probably have a look at that.

[alexesDev]

Tmp fix:

let c = App;

if (process.env.NODE_ENV !== 'production') {
  c = require('react-hot-loader').hot(module)(c);
}

export default c;

[theKashey]

Would it be better to split code into separate, easy to analyze chunks?

if(process.env.NODE_ENV === 'production')
   module.exports = require('./dist/react-hot-loader.production.min.js');
} else if (!module.hot) {
   // throw something about `hot:true`
   module.exports = require('./dist/react-hot-loader.production.min.js');
} else if(!hasWindow) {
   // throw something about `where is my window dude`
   module.exports = require('./dist/react-hot-loader.production.min.js');
} {
  // the real "dev" code
}

[lewislbr]

Any updates on this? I’d like to help!

I've been able to quick-fix this by:

if (process.env.NODE_ENV === 'development') {
  if (module.hot) {
    module.hot.accept();
  }
}

[theKashey]

process.env.NODE_ENV === 'development' is not a real thing. More often the negative construction is used, ie process.env.NODE_ENV === 'production'.
The difference is between AM_I_IN_DEV_MODE vs OH_THATS_PRODUCTION. Of course the second one is more important, that's why only it is checked, and that's why we are here.

Probably solution two comments above, with simplified conditions, is more future proof.

---

Just checked - it was implemented in RHL 11 months ago

[lewislbr]

Noted. One thing though: why do we even need to include react-hot-loader.production.min.js in production at all?

[theKashey]

Because you can use some of provided commands like AppProvider or, well, hot in your code.
react-hot-loader's "production mode" babel plugin should remove as much as possible, but something might be still present, but like 100bytes.

[stevefan1999-personal]

This is an onboarding issue for quite a long time...