23

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');
    }));
};
5
  • 3
    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.
    – Dominic
    Nov 18, 2015 at 15:43
  • 1
    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.
    – Poirette
    Nov 18, 2015 at 16:50
  • Ah I see, it won't work if there isn't a global React or require, but not sure about a specific setting
    – Dominic
    Nov 18, 2015 at 17:49
  • I recently published a package to disable the React Developer Tools plugin: npmjs.com/package/@fvilers/disable-react-devtools Feb 18, 2019 at 9:18
  • 4
    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 Aug 29, 2020 at 17:32

11 Answers 11

36

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.

4
  • I am getting following error : Cannot set property 'inject' of undefined Feb 15, 2017 at 11:05
  • 2
    go to chrome://extensions/ to see if the "React Developer Tools" is activated
    – peteroid
    Feb 17, 2017 at 17:17
  • 2
    @LoveTrivedi are you rendering this through the server? Remember Node doesn't have a window object. Wrap the snippet in if (window){ ... } Aug 28, 2017 at 15:47
  • 3
    @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. Oct 11, 2017 at 19:40
15

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

1
  • 17
    This answer is referencing redux dev tools and not react-devtools. Aug 22, 2019 at 18:40
6

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() {};
}
3
  • you can add it to index.html file in public folder. Sep 3, 2019 at 11:27
  • 1
    How do we assign/access the environment variable inside the script tags? so that enable only in production mode. Sep 3, 2019 at 13:07
  • 1
    @siluverukirankumar add this condition "%NODE_ENV%" !== "development"
    – khcpietro
    Oct 5, 2021 at 5:11
2

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

1

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>
2
  • That's not a bulletproof idea - one could create a local proxy server that serves your website from localhost, fooling this mechanism. Aug 12, 2020 at 9:14
  • @WojciechMaj you are right. I edited my answer to a better solution. Aug 12, 2020 at 10:53
1

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'));
1

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 ^^
0

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;
1
  • 3
    OP asked about React DevTools. This answer concerns Redux DevTools. Not relevant.
    – Braden
    Feb 12, 2022 at 9:44
0

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.

1
  • man re-read the article Nov 13, 2022 at 13:36
0

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();
}
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.