New devtools is not compatible with React 0.14

[bikasv]

Hi,
I've some old projects written in React 0.14 and they do not work if I open developer tools with new React Devtools. If I remove React Devtools then the app works just fine.
The error I'm getting is

    backend.js:9 Uncaught (in promise) Error: Expected to find root ID.
    at Object.performUpdateIfNecessary (backend.js:9)
    at Object.e.<computed> [as performUpdateIfNecessary] (backend.js:9)
    at runBatchedUpdates (ReactUpdates.js:129)
    at ReactReconcileTransaction.perform (Transaction.js:136)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:136)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:86)
    at flushBatchedUpdates (ReactUpdates.js:147)
    at wrapper (ReactPerf.js:66)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:45)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:202)

IS the new Devtool not compatible with older version of React? If they're can you please suggest possible workaround for this?

[dusnoki]

I'm having the same issue as you. Removing dev tools fixes app. Not quite sure what is going on!

[bikasv]

I just read it up the blog update and response from @gaearon. It looks like React version below 15.x is not supported in new Devtool - https://reactjs.org/blog/2019/08/15/new-react-devtools.html

We've to compile the older version manually to have it working for older React version. Details are given here - https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back

[alsaidib]

You just need to disable react devtools form Chrome extensions list

OR

just install the old version

npm install --dev react-devtools@^3

https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back

[codingleo]

I had the same problem where I've looped around components and used something like id from some model. Changing it to index of the array solved the issue for me.

Not working:

                   <Table bordered>
                        <tbody>
                            {props.userList.map(user => (
                                <tr key={`${user.id}`}>
                                    <td>{user.completeName}</td>
                                    <td>{user.email}</td>
                                </tr>
                            ))}
                        </tbody>
                    </Table>

Worked again with:

                    <Table bordered>
                        <tbody>
                            {props.userList.map((user, index) => (
                                <tr key={`${index}`}>
                                    <td>{user.completeName}</td>
                                    <td>{user.email}</td>
                                </tr>
                            ))}
                        </tbody>
                    </Table>

Update 1:
By using it with array index is not a good practice (so consider it my palliative plan), so I've tried using other model related data as key, then I had other warnings while rerendering it with hot-reload:

Not sure if it's related.

[bvaughn]

This issue has already been reported in the main React repo:
facebook/react#16462

This repository is for the legacy DevTools extension (v3) and is in the process of being shut down.

Thank you!