Disable chrome react DevTools for production

Question

I'm trying to browserify my react app for production using gulp and envify to setup NODE_ENV. So I can remove react warning, error reporting in the console, and even my code to disable some features like the require of react-addons-perf.

And it's working great. When I search in my app.js for "production" to see if there are theses typical conditions :

if("development" !== "production") {
    ...
}

There is nothing, so, as I said, it seems to work well.

But, I still can see that chrome's react DevTools tab with all react components, like if I was on a development website. How can I disable this tab in chrome's dev tools ?

Here is my gulp task :

var production  = process.env.NODE_ENV === 'production' ? true : false;
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';

...

var bundler = browserify({
    debug: !production,

    // These options are just for Watchify
    cache: {}, packageCache: {}, fullPaths: true
})
.require(require.resolve('./dev/client/main.js'), { entry: true })
.transform(envify({global: true, _: 'purge', NODE_ENV: environment}), {global: true})
.transform(babelify)
.transform(reactify);

var start = Date.now();
bundler.bundle()
    .on('error', function (err) {
        console.log(err.toString());
        this.emit("end");
    })
    .pipe(source('main.js'))
    .pipe(gulpif(options.uglify, streamify(uglify())))
    .pipe(gulpif(!options.debug, streamify(stripDebug())))
    .pipe(gulp.dest(options.dest))
    .pipe(notify(function () {
        console.log('Built in ' + (Date.now() - start) + 'ms');
    }));
};

Grecize

The actual plugin in Chrome? Why would you want to do that? Your js shouldn't contain anything sensitive. Why would Chrome allow you, from a website, to change things in Chrome? Think about it - that would be a massive security flaw, to be able to turn stuff on/off in the users browser with javascript. – Teodora

Yeah, the chrome plugin. Don't worry, the user can't do nothing if he is not authenticated : every request is checked with a token on the server side with a strong secret key (1024 char.). My question is, is it possible and how ? As far as I know, it's possible do to it so here I am asking how and why it isn't working with my gulp task. – Grecize

Ah I see, it won't work if there isn't a global React or require, but not sure about a specific setting – Teodora

I recently published a package to disable the React Developer Tools plugin: npmjs.com/package/@fvilers/disable-react-devtools – Perpendicular

If anyone is interested in bypassing this "protection" by any answers here or NPM packages, simply use the Local Overrides functionality in Chrome and delete the offending lines after beautifulcation. e.g. trysmudford.com/blog/chrome-local-overrides – Daft

Answer 1

According to an issue on Github, you can add run a single javascript line before react is loaded to prevent it.

From #191 of react-devtools

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

Then, you may consider wrapping this with your environment condition, like that you could do sth like below in your server side rendering. Let's say Pug (formerly known as Jade):

#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}

However, it would be still a good practice to put the business logic and the sensitive data back to your server.

Iiette

I am getting following error : Cannot set property 'inject' of undefined – Martinamartindale

go to chrome://extensions/ to see if the "React Developer Tools" is activated – Iiette

@LoveTrivedi are you rendering this through the server? Remember Node doesn't have a window object. Wrap the snippet in if (window){ ... } – Dru

@LoveTrivedi That will probably happen if you don't have the react devtools installed. So, your code should probably check if __REACT_DEVTOOLS_GLOBAL_HOOK__ is even defined first. – Unhair

Answer 2

If you are using redux-devtools-extension you can do this.

const devTools =
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middlewares)
    : composeWithDevTools(applyMiddleware(...middlewares));

const store = createStore(rootReducer, initialState, devTools);

This will make sure your devtools extension only works in the development environment and not in the production environment

Nicollenicolson

This answer is referencing redux dev tools and not react-devtools. – Dotti

Answer 3

Just improve @peteriod answer, to make sure Dev tool has installed or not

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}

Evilminded

you can add it to index.html file in public folder. – Evilminded

How do we assign/access the environment variable inside the script tags? so that enable only in production mode. – Dissymmetry

@siluverukirankumar add this condition "%NODE_ENV%" !== "development" – Inflammable

Answer 4

You could also delete all source map after build by adding the command below on your package.json file.

"scripts":{
     ...,
    "build": "react-scripts build",
    "postbuild": "rimraf build/**/*.map"
}

It makes it a bit difficult to navigate the components and hides them on devtools - source

Rebba

Answer 5

you can check the mode :

---

add below code befor </body> in your index.html in the public folder

  <input type="hidden" value="%NODE_ENV%" id="node_env_mode" />
<script>
  var mode = document.querySelector("#node_env_mode").value;
  if (
    mode === "production" &&
    typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
  ) {
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {};
  }
</script>

Girovard

That's not a bulletproof idea - one could create a local proxy server that serves your website from localhost, fooling this mechanism. – Abutilon

@WojciechMaj you are right. I edited my answer to a better solution. – Girovard

Answer 6

You can use @fvilers/disable-react-devtools package to disable React Developer tool

First, install the package mentioned above

npm i @fvilers/disable-react-devtools

or

yarn add @fvilers/disable-react-devtools

than

Call the disableReactDevTools() method before React is loaded, in your main file.

import React from 'react';
import ReactDOM from 'react-dom';
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import App from './App';

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}

ReactDOM.render(<App />, document.getElementById('root'));

Award

Answer 7

for my solution that work with npm run build

1. add file .env.production to root project (same place with package.json file)
2. add properties INLINE_RUNTIME_CHUNK=true to file .env.production (recommend add with GENERATE_SOURCEMAP=false to make sure *.map file will not generated after build)
3. final try npm run build enjoy ^^

Flirtation

Answer 8

Try adding this in your store.js

const initialState = {};
const middleware = [thunk];

const devTools =
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middleware)
    : composeWithDevTools(applyMiddleware(...middleware));

const store = createStore(rootReducer, initialState, devTools);

export default store;

Candace

OP asked about React DevTools. This answer concerns Redux DevTools. Not relevant. – Oleary

Answer 9

In order to remove the dev tools you have to remove the following line from the file index.js:

mainWindow.webContents.openDevTools();

It is a line of index.js, i.e., of line 23.

Flavia

man re-read the article – Consciousness

Answer 10

I always use a 'fvilers/disable-react-devtools' package and it has always worked for me.

All you need to do is install this page by using

npm i @fvilers/disable-react-devtools

and then tell your app you are in production env. Import the package into your app by

import { disableReactDevTools } from '@fvilers/disable-reactdevtools';

and then use the use the following code snippet on top of you app component.

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}
    import { disableReactDevTools } from '@fvilers/disable-react-devtools';

if (process.env.NODE_ENV === 'production') {
  disableReactDevTools();
}

Marymarya

Answer 11

This solution just worked for me perfectly, define the below function inside your root file then call the disbaleReactDevTools() function:

const disableReactDevTools = (): void => {
  const noop = (): void => undefined;
  const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

  if (typeof DEV_TOOLS === "object") {
    // eslint-disable-next-line no-restricted-syntax
    for (const [key, value] of Object.entries(DEV_TOOLS)) {
      DEV_TOOLS[key] = typeof value === "function" ? noop : null;
    }
  }
};

you can find more details in here: https://github.com/facebook/react-devtools/issues/191#issuecomment-443607190

Skye