React-hot-loader: "react-hot-loader/babel" includes file path in production mode

[TheAifam5]

Description

I found that "react-hot-loader/babel" includes files path in production mode, also when "process.env.NODE_ENV" is defined to "production".
After removing from webpack configuration and babelrc, everything looks fine.

Expected behavior

There shouldn't be any paths in production mode.

Actual behavior

"react-hot-loader/babel" includes files path, ignoring the environment type.

Environment

React Hot Loader version: next (today refreshed)

node -v: v9.4.0
npm -v: 5.6.0
Operating system: Windows 10
Browser and version: Firefox Nightly 59.0a1

My webpack config to prevent including file paths inside the compiled scripts.

{
  loader: 'babel-loader',
  options: {
    babelrc: true,
    ... env.name === 'development' ? {
      plugins: ['react-hot-loader/babel'],
    } : {},
  },
},

[theKashey]

Duplicates #692, please check your configuration, ie does dead code elimination works.

[opr]

Hi there I am also having this issue, I have checked dead code elimination is working

Proof is here:
see line 13 of https://github.com/opr/spooky/blob/281f9962b4b19b29fae1dca5dc45212e56e78fa8/assets/js/modules/index.js

and see this (not uglified) https://github.com/opr/spooky/blob/281f9962b4b19b29fae1dca5dc45212e56e78fa8/assets/js/dist/spooky.js

and also see this (uglified) https://github.com/opr/spooky/blob/281f9962b4b19b29fae1dca5dc45212e56e78fa8/assets/js/dist/spooky.min.js

for evidence of dead code elimination working.

Here is my webpack.config

https://github.com/opr/spooky/blob/281f9962b4b19b29fae1dca5dc45212e56e78fa8/webpack.production.config.js

Thanks!

[theKashey]

You have proven, that webpack could remove "dead" branches, and by "dead" I mean with const conditions.
Let's try to search inside your bundle next string

if (process.env.NODE_ENV === 'production') {

It does exist, thus it is not __constant__, thus could not be evaluated during the complication, and next removed as a dead code.

PS: You also got 2 version of React. Hooray!

Try replace

new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),

Into.

new webpack.DefinePlugin({
'process.env.NODE_ENV': environment,
});

Now we have exact variable name, and webpack will do the rest of magic.

[opr]

Hi @theKashey thanks for your response

I made the change you suggested to the webpack.DefinePlugin.
https://github.com/opr/spooky/blob/109ccb46ee3a316be471b0cc68acb4c9cfb1423a/webpack.production.config.js

I looked inside the uglified bundle and could not find that string - this is the uglified bundle again for reference: https://github.com/opr/spooky/blob/109ccb46ee3a316be471b0cc68acb4c9cfb1423a/assets/js/dist/spooky.min.js

If you observe line 11 here:

https://github.com/opr/spooky/blob/109ccb46ee3a316be471b0cc68acb4c9cfb1423a/assets/js/react/TestInput/TestInput.jsx

you will see I have tested the environment is being set correctly. Inside the uglified bundle I can still see paths and I can also see my "BANANAS" test.

(Please don't worry about the non-uglified bundle as I am not using the DefinePlugin there)

I hope this provides more information.

[opr]

I have discovered that my problem was the same as https://github.com/gaearon/react-hot-loader/issues/602#issuecomment-315251323

Thank you for the help and apologies for missing this!

(PS what do you mean that I have 2 versions of react?)

[theKashey]

PS: React also has dev and prod variant, and in modern versions this is 2 __big__ flat(single file) bundles.

[lili21]

still have the issue.
I'm using [email protected]

[lili21]

https://github.com/lili21/react-hot-loader-demo

[theKashey]

@lili21 - sorry, but RTFM

• https://webpack.js.org/guides/production/#specify-the-environment
• https://github.com/webpack/webpack/issues/2537

You have to

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

[lili21]

I think mode: production already did that for me.

[lili21]

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

doesn't work for me.

NODE_ENV=production webpack --config webpack.prod.js works.

[theKashey]

That's why I linked an issue about "webpack is not doing it". And providing NODE_ENV is super important.

[pats]

Still, providing NODE_ENV=production doesn't work,

[theKashey]

You shall not only set NODE_ENV, but also "define" that env for webpack. 2 comments above.

[Sakots2499]

Only

[mlzachen]

I can confirm that what @theKashey 's saying resolves the issue. Setting --env.mode itself won't do the trick and you have to set the webpack.DefinePlugin (env) to production.

// Npm script
"webpack --env.mode production"

// Webpack config
module.exports = (env) => {}

// In Webpack config plugins
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(env.mode),
}),

It seems that process.env.NODE_ENV must be set exactly like it's typed, as process.env won't suffice. Also important that the env.mode is _stringifyed_.

Thanks @theKashey.

[rflmyk]

I'm have the same problem, I try use workaround @M7Dev but... dont work for me, i'm using:

    ...
    "webpack": "4.26.0",
    "webpack-dev-server": "^3.1.10",
    "react-hot-loader": "^4.3.12"

Someone has a workaround or fix for that?

[davincho]

My issue was that https://github.com/gaearon/react-hot-loader/blob/master/babel.js was using the dev version even when building for production.

So it was not about setting up webpack.DefinePlugin correctly, but making sure babel is aware as well, like NODE_ENV=production webpack --config webpack.prod.js

[rflmyk]

Just it, work for me, but I using a solution a litle diferent, take a look:

on my webpack.config.js I have

const IS_DEV = (argv.mode === 'development');

to check mode.

I create a:

        ...
    const BABEL_PLUGINS = [
        'lodash',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-transform-react-jsx',
        'transform-class-properties',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-runtime',
        '@babel/plugin-syntax-async-generators',
        '@babel/plugin-transform-regenerator',
    ];

    IS_DEV && BABEL_PLUGINS.push('react-hot-loader/babel');
        ...

And below I do it:

        ...
        {
            loader: 'babel-loader',
            options: {
                compact: true,
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react'
                ],
                plugins: BABEL_PLUGINS
            }
        }
      ....

Now work very well ;) tnks @davincho