React: Disable warning about minified copy of the development build

[japgolly]

Hello. Since upgrading to v15 I get this all over the place in my unit tests:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

This warning makes sense in prod but in my case, my toolchain is a little different; I use React with Scala and build a special test-deps.js containing all external JS required by unit tests. Minimising it means it loads faster and so I end up with a valid case for a minimisation of the React dev.

Is there a way to remove this warning? It appears a heap of times as my tests are concurrent.

[zpao]

Is there a way to remove this warning?

Currently, no. One of the things that's somewhere on the roadmap is to make it easier to opt-in/out of specific warnings but there hasn't been a lot of motion on that. Maybe there's something we can do specifically for that warning though...

[dangreen]

@zpao i have this warning with NODE_ENV=production

[nodeman777]

if use webpack,add those code when deploy

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

[dy86]

@nodeman777
I've add that code in webpack plugins, but the warning still exit.

[zpao]

The issue reported here is specifically about minifying non-production React. If you have problems with your toolchain creating a production build, that's a distinct issue and should be discussed in a new issue (or stack overflow first, as this is not intended to be a support forum).

[le0pard]

In general, if you are minifying your code on staging to simulate a production environment, you should probably be running the production copy of React just in case there are any subtle differences in the code paths (there shouldn't be, if we did everything right, but you never know and it's that type of bug that can really bite you).

Yep, I agree, but we using NODE_ENV to set environment for app and this describe for app what endpoints/databases/credentials to use in this environment. What is why we need staging. And I think it is not good to use some another environment variable for app to fix warning with react

[vimniky]

Oh I have just got this warning !

[vimniky]

@japgolly : changed the title from Disable minified copy of the development build to Disable warning about minified copy of the development build ?

[vimniky]

see here .

[zhoou]

@vimniky After I read your article , I solved the warning .

[devisions]

@vimniky Just found you article before and I confirm too that the warning is gone. Thank you!

[atombender]

I'm getting this warning with NODE_ENV=development, where it doesn't make any sense. We're not even using minification; we use Browserify to build the app bundle on demand.

[hasangilak]

if you do uglify or any things that minify your code in your webpack config in development mode this warning will be showed
for me i have to remove
new webpack.optimize.UglifyJsPlugin({mangle: false, compress: {warnings: false}}),
in my webpack development config to get rid of this warning

[0xBADCA7]

This issue was happening to me when running uglify-js with --compress and/or --mangle params.

[aeruhxi]

I am getting this error in NODE_ENV=development, too
Is this a bug?

[jocongmin]

i add this "new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})",but still show Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

can anyone tell me how to resolve this problem?

[slashwhatever]

Also getting this message in production despite env-ifying

[zeusbangayan]

I keep getting this even if I added this:

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

then run this:
"build": "cross-env NODE_ENV=production webpack --progress --colors -p"

even if I run just webpack -p with DefinePlugin settings, still im getting the warning.

[cythrawll]

I found that passing -p to webpack fixes this error. Is webpack no longer looking at NODE_ENV?

[gaearon]

We don’t plan to relax the warning. If you see it there is a problem in your build. You’re shipping a lot of unnecessary code to your users, and React is also slower in development mode.

We have instructions for all popular bundlers. If you are still having problems, please provide a project and somebody might help you out in this thread.

Cheers!

[gaearon]

Is webpack no longer looking at NODE_ENV?

Webpack never looked at NODE_ENV. You need to manually specify DefinePlugin as described above.

[japgolly]

If you see it there is a problem in your build. You’re shipping a lot of unnecessary code to your users

Did you even read the description of this issue? The very first comment?? What the hell?

There are cases, like I described, in which IT IS NOT A PROBLEM WITH THE BUILD, and one is not shipping any unnecessary code to users. That's a completely unreasonable reason to close this issue.

[gaearon]

Yes, I missed the clarification in your first comment. Nevertheless every other single comment on this thread is about the legitimate issue (or attempts to circumvent it). I don't want people to get the wrong impression that since the issue is open, the warning could be a false positive. For the vast majority of people (except you) it is a legitimate issue that should be fixed in their builds.

We might provide a minified development build. We haven't decided yet but we're changing our build process now, and we could do it. (cc @trueadm) But please keep in mind your request is very special, and doesn't reflect what majority of people in this issue are discussing.

Finally, there's no need to be rude. If you sat next to me, would you also yell at me? Please tone your comments down in the future. Even if you disagree with something, or if I made a mistake, there's no need to use caps or be "what the hell?" about it. Thanks.

[japgolly]

Finally, there's no need to be rude. If you sat next to me, would you also yell at me? Please tone your comments down in the future. Even if you disagree with something, or if I made a mistake, there's no need to use caps or be "what the hell?" about it. Thanks.

You're completely right. It's out of character for me to respond like that and looking back now I'm not sure why I reacted that way. I'm sorry about that and apologise. :bowing_man:

[trueadm]

@japgolly are you running this via Node/NPM or via a UMD bundle? Is the tooling run on the client or on a server via Node?

[zeusbangayan]

i have fixed the issue..

combination of running webpack -p and using Uglify Plugin causes the issue.

I omitted -p when running build and im using uglify plugin and fix this issue.

[rcdsp]

combination of running webpack -p and using Uglify Plugin causes the issue.

Regarding the -p flag, I think reading both React docs on Optimizing Performance in the wbepack section and webpack's own docs on Building for production should clarify why some people get errors or warnings by combining this two things:

// webpack.config.js according React docs
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
}),
new webpack.optimize.UglifyJsPlugin()

-p flag in the build script as webpacks docs state:

Running webpack -p (or equivalently webpack --optimize-minimize --define process.env.NODE_ENV="'production'"). This performs the following steps:

• Minification using UglifyJsPlugin
• Runs the LoaderOptionsPlugin (see its documentation)
• Sets the NodeJS environment variable triggering certain packages to compile differently

I don't have a deep background on webpack but it seems to me that the above code and the -p flag in webpack accomplish the same thing.

I can confirm (in a very small project for testing purpose) that running a build script with webpack -p flag and without the above code in webpack.config.js results in the same code as running the opposite, a build script without the -p flag but adding the above code to webpack.config.js

Either way, both minification errors and warnings about using minified copies of the development versions (i had warnings like this from both react and redux) are removed.

Note that on Windows doing this doesn't seem to work:

// package.json
"build": "SET NODE_ENV=production yarn run clean && webpack"

// webpack.config.js
new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  }
})

This is why i was getting the warning in the first place, it seems like NODE_ENV is never set to "production" but this can be fixed by using cross-env.

[japgolly]

are you running this via Node/NPM or via a UMD bundle? Is the tooling run on the client or on a server via Node?

Sorry! I completely forgot to respond to this. In my scenario, it runs on CI and local dev machines and not as a bundle, but after bundling. I recently switched over to using Webpack and Webtamp (instead of Gulp) and now I'm creating a bundle specific to my unorthodox (from a JS perspective) unit testing requirements. That all works well and has resolved the issue for me.

Still it's great work that it seems a solution has been found (above). :+1:

[hognogi]

Hi Everyone,

I just wanted to mention that I struggled with this issue, and it turned out that setting the "devtool" to "eval" also causes this issue, regardless of the configuration of the uglifier, so whoever struggles with this, also check your devtool, and set it to "source-map" or whatever other option.

Cheers.

[aweary]

Hey @hognogi, I haven't heard of setting devtool to "eval" causing this issue, would you be able to provide an example demonstrating this? As far as I know, that shouldn't cause this warning, so it'd be great if we could investigate it.

[hognogi]

@aweary

http://imgur.com/a/Q1Lfc

It might not be an issue inherent in the library itself, but that we failed to convince the webpack to actually uglify the code inside the eval statements (maybe uglify by loader??? ) but as far as we're concerned, eval + webpack.optimize.UglifyJsPlugin = error.

[aweary]

@hognogi thanks, I think that makes sense. The eval devtool is not meant for use in production, so that sounds expected to me.

[gaearon]

I don’t think we have this particular warning anymore in React 16. Instead we detect development builds with React DevTools.

[x-yuri]

@gaearon What do you think is the proper set-up for integration tests? NODE_ENV=test and non-minified? Isn't testing environment should be as close to production one as possible?

One a side note, the condition passed to warning function seems to be true if non-minified, am I missing something?

    var testFunc = function testFn() {};
    warning(
      (testFunc.name || testFunc.toString()).indexOf('testFn') !== -1,
      "It looks like you're using a minified copy of the development build " +
        'of React. When deploying React apps to production, make sure to use ' +
        'the production build which skips development warnings and is faster. ' +
        'See https://fb.me/react-minification for more details.',
    );

[tommoor]

I don’t think we have this particular warning anymore in React 16. Instead we detect development builds with React DevTools.

@gaearon Is the project open to reintroducing the console warning? We use Electron without React Devtools (you don't bundle in the prod build) and just found out that the development build of React has been being used for a long time without any warning :(

[manojci]

if you do uglify or any things that minify your code in your webpack config in development mode this warning will be showed
for me i have to remove
new webpack.optimize.UglifyJsPlugin({mangle: false, compress: {warnings: false}}),
in my webpack development config to get rid of this warning

@hasangilak on changing mangle: false, minified file size increases little bit.