Search code examples
reactjswebpackserver-side-rendering

How to disable loading React Devtools Backend script


On production react_devtools_backend.js is loading anyway and it slows up my website in production. How to disable loading this react devtools? I'm using react 16.8, reactSSR, webpack 4.29, apollo

I've alreadyused

 new webpack.DefinePlugin({
      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
    }),

and

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
        window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
}

and

<script>
        if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
            __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
        }
</script>

and this

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

    if (typeof DEV_TOOLS === 'object') {
        for (const [key, value] of Object.entries(DEV_TOOLS)) {
            DEV_TOOLS[key] = typeof value === 'function' ? noop : null;
        }
    }
};

Any ideas?


Solution

  • Not sure if this is the answer you're looking for, but it seems to be loaded as a result of having installed the extension.

    When I fired up an incognito window, it wasn't getting loaded.