react is missing from redux-devtools - reactjs

Question

I am relatively new to react and webpack, and I just picked up a new project to work on. To configure DevTool, we have:
export function renderDevTools(store) {
if (__DEV__) {
let {DevTools, DebugPanel, LogMonitor} = require('redux-devtools/lib/react');
return (
<DebugPanel top right bottom>
<DevTools store={store} monitor={LogMonitor} />
</DebugPanel>
);
}
return null;
}
From the node_module, I can see:
\node_modules\redux-devtools\lib\
has
createDevTools.js
index.js
persistState.js
but there is no react.js in this folder, so running the code will give:
ERROR in ./app/utils/devTools.js
Module not found: Error: Cannot resolve module 'redux-devtools/lib/react'
I have tried
npm install redux-devtools
but there is still missing react from the file. This is a legacy code, and when I tried running it, it isn't working. I am wondering what went wrong?

Answer 1

This code is for redux-devtools#2. In redux-devtools#3 monitors are decoupled into redux-devtools-log-monitor and redux-devtools-dock-monitor, which you have also to install and add to you project as indicated in the docs.
Also you have to set __DEV__ as true in webpack.config (which should be different for development and production):
plugins: [
new webpack.DefinePlugin({
'__DEV__': true
})
],
A easier way is not to include it directly into your app, but to use Chrome / Firefox extension. Then you can add it to your Redux store with just one line of code:
const store = createStore(reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
Make sure to remove everything else related to Redux DevTools in this case.
If you're using the extension you can use it also in production without any edge cases, otherwise make sure to remove it from production bundle.