React: DevTools v4 error "startProfiling not supported by this renderer"

[eranimo]

Do you want to request a feature or report a bug? Bug

What is the current behavior?

Starting a profile in React DevTools v4 results in a console error and no change from the extension:

Uncaught Error: startProfiling not supported by this renderer
    at Object.startProfiling (backend.js:9)
    at t.<anonymous> (backend.js:1)
    at t.u.emit (backend.js:1)
    at backend.js:9
    at t (backend.js:1)

I am on React 16.8.2. I am also using auth0-lock, which uses React v15.6.2 (relevant discussion here) as a direct non-dev and non-peer dependency. I suspect that this is causing the bug. This dependency existed when we used DevTools v3, so I suspect that something must have changed in v4 to cause this.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

1. Open a React app
2. Install [email protected]
3. Try to profile
4. Go to Console, see error

What is the expected behavior?

Profiling should work and not error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[email protected]
[email protected]
[email protected]

These dependencies have not changed in between DevTools v3 and v4.

[bvaughn]

Aside from this error, does profiling work for the v16 renderer?

[eranimo]

Profiling does not work at all with DevTools v4. After pressing the profile button (also the reload and profile button) the error is printed to the console and nothing else happens.

[eranimo]

I suspect the problem is that DevTools finds the version of React that auth0-lock uses and not the version that my app uses. This wasn't the case in DevTools v3. This behavior must have changed in v4.

[bvaughn]

I think DevTools "finds" both versions. Maybe it just happens to call startProfiling on the older version first, without handling the error, so it doesn't continue to call it on v16.

:)

[eranimo]

Is there a way to force it to use one version?

[bvaughn]

No. This just needs to be fixed (prob a try/catch added to the agent around the method call)

[eranimo]

Makes sense. I'll try to find a way to downgrade my version of DevTools until then. Thank you!

[bvaughn]

I'll take a look into this this morning.

[bvaughn]

Fixed via https://github.com/bvaughn/react-devtools-experimental/commit/454157dd660f7ed70684a459fff0482bee1d87d1

Will go out in the next release (4.0.3) sometime today. Thanks for reporting!

[gaearon]

As an aside it’s pretty bad that you’re loading two different versions of React on the same page. If possible, try to avoid this.

[bvaughn]

v4.0.3 has just been released with this fix.

Full changelog: https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#403-august-17-2019

[eranimo]

@gaearon I agree, but the problem appeared to have been because of a dependency (auth0-lock) of ours, not our app code. It's sometimes hard to tell if there are multiple versions of React being loaded, we had no idea until this bug.

[gaearon]

Sure, I'm just saying you should consider reporting it to them.