Redux-devtools: React 16

[wojtekmaj]

Hey there,
are you planning to officially support React 16?
I have tested this library with 16.0.0-rc.2 and so far, so good.

I'd appreciate feedback from other users how well redux-devtools behaves on their React 16-based environments.

If the feedback will be positive, updated redux-devtools stating React 16 compatibility would be great.

This should be alright IMO:
"react": "^0.14.9 || ^15.0.0 || ^16.0.0",

[DMShamonov]

Hi @wojtekmaj
With "react": "16.0.0" I have this warnings in console:

Warning: Expected onClick listener to be a function, instead got a value of boolean type.
in label (created by JSONNestedNode)
in li (created by JSONNestedNode)
in JSONNestedNode (created by JSONObjectNode)
in JSONObjectNode (created by JSONNode)
in JSONNode (created by JSONNestedNode)
in ul (created by JSONNestedNode)
in li (created by JSONNestedNode)
in JSONNestedNode (created by JSONObjectNode)
in JSONObjectNode (created by JSONNode)
in JSONNode (created by JSONTree)
in ul (created by JSONTree)
in JSONTree (created by LogMonitorEntry)
in div (created by LogMonitorEntry)
in div (created by LogMonitorEntry)
in LogMonitorEntry (created by LogMonitorEntryList)
in div (created by LogMonitorEntryList)
in LogMonitorEntryList (created by LogMonitor)
in div (created by LogMonitor)
in div (created by LogMonitor)
in LogMonitor
in div (created by Dock)
in div (created by Dock)
in div (created by Dock)
in Dock (created by DockMonitor)
in DockMonitor (created by Connect(DockMonitor))
in Connect(DockMonitor) (created by DevTools)
in DevTools (created by AppComponent)
in div (created by AppComponent)
in Provider (created by AppComponent)
in Router (created by BrowserRouter)
in BrowserRouter (created by AppComponent)
in AppComponent

Warning: Expected onClick listener to be a function, instead got a value of boolean type.
in span (created by JSONNestedNode)
in li (created by JSONNestedNode)
in JSONNestedNode (created by JSONObjectNode)
in JSONObjectNode (created by JSONNode)
in JSONNode (created by JSONNestedNode)
in ul (created by JSONNestedNode)
in li (created by JSONNestedNode)
in JSONNestedNode (created by JSONObjectNode)
in JSONObjectNode (created by JSONNode)
in JSONNode (created by JSONTree)
in ul (created by JSONTree)
in JSONTree (created by LogMonitorEntry)
in div (created by LogMonitorEntry)
in div (created by LogMonitorEntry)
in LogMonitorEntry (created by LogMonitorEntryList)
in div (created by LogMonitorEntryList)
in LogMonitorEntryList (created by LogMonitor)
in div (created by LogMonitor)
in div (created by LogMonitor)
in LogMonitor
in div (created by Dock)
in div (created by Dock)
in div (created by Dock)
in Dock (created by DockMonitor)
in DockMonitor (created by Connect(DockMonitor))
in Connect(DockMonitor) (created by DevTools)
in DevTools (created by AppComponent)
in div (created by AppComponent)
in Provider (created by AppComponent)
in Router (created by BrowserRouter)
in BrowserRouter (created by AppComponent)
in AppComponent

[buffcode]

@DMShamonov we have the same error, but you can open the stacktrace and in our case I don’t think this is related to devtools.

[DMShamonov]

@buffcode I'm sure it's related to devtools, in my case. Because when I disable devtools, I don't have this warnings.
But, It's warnings not related with react 16, of course :) It's prop-types warnings (I use 15.6.0 prop-types version)

[holyxiaoxin]

Happens after upgrade to react 16. And yes, errors only appear after turning on devtools. The error messages are not very telling either.

[tpennetta]

Looks like there is a PR for the fix here:

https://github.com/alexkuz/react-json-tree/pull/97

Repo admins have not accepted yet.

[gnapse]

I have redux-devtools in a React v16 app, and I don't get these warnings in the console. Perhaps these messages occur also in combination of something else in that app, that my app does not have?

[DMShamonov]

@gnapse maybe... I use redux-devtools-dock-monitor (1.1.2) and redux-devtools-log-monitor (1.3.0) with redux-devtools (3.4.0) and get these warnings.

[gnapse]

@DMShamonov there you go. My point is, it seems to me there's nothing right now preventing this package to have its dependencies fixed as @wojtekmaj suggested initially. It is most probably one of those two other addons to the redux-devtools that cause your warnings.

[jayfunk]

Created a PR to fix the peer dependency issue.

385

[GuillaumeCisco]

Did anyone test react 16, redux-devtools with hydrate in an SSR config?

I come across a very hard error to fix, I get in my console:

commonVendors-dll.js:1061 Warning: Prop `style` did not match.
Server: "cursor:pointer;font-weight:bold;border-radius:3px;padding:4px;margin-left:3px;margin-right:3px;margin-top:5px;margin-bottom:5px;flex-grow:1;display:inline-block;font-size:0.8em;color:white;text-decoration:none;background-color:#373b41"
Client: "cursor:text;font-weight:bold;border-radius:3px;padding:4px;margin-left:3px;margin-right:3px;margin-top:5px;margin-bottom:5px;flex-grow:1;display:inline-block;font-size:0.8em;color:white;text-decoration:none;background-color:transparent;opacity:0.2"

This diff in css come from the button Revert of the redux-dev-tools-log-monitor.
Let me explain, it's a little complex.
The button change its css when computedStates.length > 1 via its props hasStates.

I displayed the computedStates on the webpack server compilation and in the webpack frontend compilation.
In the first case, I have an array with a duplicated entry, and in the second one, an array with one entry (legit).
The first time this prop is filled is on the '@@redux/INIT' action type.
What it's going on is that on the server side, when discovering the routes from my code (I use redux-first-router, which is awesome and you should use it), a redux action is pushed for getting the component related to the route, and so, the computedStates get a new entry as described in the code in redux-devtools-instrument/src/instrument. This is the problem...
And so on, on the client side, I only have one redux action type which is '@@redux/INIT' and no new push to the route, because I'm already on it with the component loaded thanks to ssr.
BUT, DevTools is not rendered the same way, hence the css diff :/

I clearly don't know how to solve this problem.
Can we create special conditions for redux-devtools and ssr?

I tried simply to not include my <DevTools/> component in the server side rendered by react as I did with react 15 render, but hydrate complain again with:

Warning: Expected server HTML to contain a matching <div> in <div>.

The DevTools div is not present, so it's complaining I guess.
Anybody in this situation?

[zalmoxisus]

@jayfunk's was merged and is available in 3.4.1.

@GuillaumeCisco you shouldn't include devtools on the server side and in production, otherwise it'll affect the performance. See the examples.

[GuillaumeCisco]

@zalmoxisus I don't include DevTools on the server side in production.
I use SSR in dev and production, I don't use webpack dev server.
But as I told before, if I don't include it in the server side code in dev mode, I get the error:

Warning: Expected server HTML to contain a matching <div> in <div>.

The DevTools div is not present on the server side but present in the client side, so it's complaining, which is absolutely normal.
Is it possible to have DevTools work with server side architecture with react 16? Am I missing a trick?

[GuillaumeCisco]

Ok just found a way to work with redux-devtools and an SSR architecture.
Simply don't include the Devtools in your main app aka in <div id="root"></div>.
Create another <div id="devTools"></div> for example, and simply render it in the client part:

const devTools = document.getElementById('devTools');
if (process.env.NODE_ENV !== 'production') {
    // load devTools
    render(
        <Provider store={store}>
            <DevTools/>
        </Provider>, devTools);
}

It will avoid you a huge batch of problems.
Hope it will help others ;)
Cheers