Profiling does not work in Chrome

[thearrow]

Ever since upgrading the extension to the version on https://react-devtools-experimental-chrome.now.sh/ (Created on 8/2/2019 – 9:40:21 AM from 9727f4e) the profiler refuses to start for my local application.

Steps to reproduce:

1. start local development version of an application
2. hard-reload the page in Chrome
3. open the devtools, go to profiler tab
4. click the "start profiling" button
5. receive this error in console:

Stacktrace

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

startProfiling @ backend.js:9
(anonymous) @ backend.js:1
l.emit @ backend.js:1
(anonymous) @ backend.js:9
t @ backend.js:1
postMessage (async)
(anonymous) @ contentScript.js:1

I have also built the extension from source (this commit) and I get the same error.

The component tab of the extension still seems to function as expected (in both versions).

I have used the profiler successfully with previous versions of this extension (some pre 8/2 version, unsure exact date/hash).

Version information:

macOS Mojave 10.14.5
Chrome Version 76.0.3809.87 (Official Build) (64-bit)
Yarn v1.17.3
react + react-dom 16.8.6
react-hot-loader 4.12.10
babel + plugins 7.5.5
react-devtools-experimental built from 9727f4e88f7a9af233de07112794988ef9c1d61c 
react-devtools-experimental built from baac1dcc52cbb05b3733182930378de6ca22229d

package.json devDeps (minus types)

"devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "7.5.5",
    "@babel/plugin-proposal-decorators": "7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "7.5.2",
    "@babel/plugin-proposal-function-sent": "7.5.0",
    "@babel/plugin-proposal-json-strings": "7.2.0",
    "@babel/plugin-proposal-numeric-separator": "7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/plugin-proposal-optional-catch-binding": "^7.2.0",
    "@babel/plugin-proposal-throw-expressions": "7.2.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-syntax-import-meta": "7.2.0",
    "@babel/plugin-transform-react-constant-elements": "^7.5.0",
    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "@graphql-codegen/add": "^1.4.0",
    "@graphql-codegen/cli": "^1.4.0",
    "@graphql-codegen/fragment-matcher": "^1.4.0",
    "@graphql-codegen/typescript": "^1.4.0",
    "@graphql-codegen/typescript-operations": "^1.4.0",
    "@graphql-codegen/typescript-react-apollo": "^1.4.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-styled-components": "^1.10.6",
    "caniuse-lite": "^1.0.30000989",
    "circular-dependency-plugin": "^5.0.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.1.0",
    "html-webpack-inline-source-plugin": "^0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-date-mock": "^1.0.7",
    "lint-staged": "^9.2.1",
    "lodash-webpack-plugin": "^0.11.5",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-load-config": "^2.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^1.18.2",
    "progress-bar-webpack-plugin": "^1.12.1",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.0.0",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-order": "^3.0.1",
    "stylelint-processor-styled-components": "^1.8.0",
    "svg-url-loader": "^3.0.0",
    "terser-webpack-plugin": "^1.4.1",
    "tslint": "^5.18.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-react": "^4.0.0",
    "typescript": "3.5.3",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.39.1",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2",
    "write-file-webpack-plugin": "^4.5.1"
  }

extension settings

Apologies if this is a known issue, I could not find any existing issues describing this problem in Chrome. Let me know if I can supply any additional information. Love the new version of the devtools so far!

[bvaughn]

Thanks for the bug report @thearrow. I just checked and I'm not able to repro it, nor have I heard about it from anyone at Facebook using the new extension.

Is this happening for all apps or is there a particular website it happens on? (Can you go to react-window.now.sh really quick and see if you can profile there?)

[thearrow]

I can indeed use the profiler on https://react-window.now.sh/

I also just tried the profiler on a local, freshly-created create-react-app setup and it starts fine.

...which leads me to believe it is a peculiarity with my specific local (closed-source) app setup 😞 (although previous versions of the profiler appeared to work fine on this app).

Looking at the source, does this mean the devtools are choosing the "legacy renderer", even though my app is react 16+?

I bet it has something to do with the fact that my app includes multiple copies of react - react 16.8.6 for the app itself and react 15.6.2 which is required by a different dependency! Relevant discussion. Is there a way I can ask devtools to recognize a specific version of react or otherwise resolve this collision?

Thanks for your help, @bvaughn!

[thearrow]

Sure enough, I can fix this by using yarn resolutions as described in this issue to only bundle a single version of react.

Sorry for the noise!

[bvaughn]

No worries, thank you for the follow up!