React: Annoying popup from chrome devtools wrongly telling me I'm using an old version of React

[LukenAgile42]

I am given a rather annoying popup message

Unsupported React version detected
This version of React DevTools supports React DOM v15+ and React Native v61+.

In order to use DevTools with an older version of React, you'll need to install an older version of the extension.

every single time I want to use devtools.

This is NOT correct. I am using React 16.8 with a standard create-react-app build.

[hsiehc]

Same here, can someone answer this please?
I'm using 16.9 yet I keep running into this message.

[hristo-kanchev]

What version of DevTools are you using?

[hristo-kanchev]

Could be related to #16897

[hristo-kanchev]

@LukenAgile42 @hsiehc Can you provide a CodeSandbox repro link, please?

[bvaughn]

Sorry to hear. This sounds annoying.

Going to need a repro case though. Can you perhaps share a URL where this can be reproduced?

[LukenAgile42]

I am using version 4.2.0 , I cant reproduce the bug with a minimal create-react-app build.

Here is a list of our dependencies at least..

  "dependencies": {
    "@shopify/draggable": "^1.0.0-beta.8",
    "axios": "^0.18.0",
    "bootstrap": "^3.3.7",
    "classnames": "^2.2.5",
    "connected-react-router": "^6.5.2",
    "deep-equal": "^1.0.1",
    "dompurify": "^1.0.8",
    "empty": "^0.10.1",
    "flow-bin": "^0.91.0",
    "history": "^4.9.0",
    "html-to-text": "^4.0.0",
    "immutability-helper": "^3.0.0",
    "immutable": "^4.0.0-rc.12",
    "latinize": "^0.4.0",
    "lodash": "^4.17.11",
    "lodash.curry": "^4.1.1",
    "node-sass": "^4.8.3",
    "npm-run-all": "^4.1.1",
    "plotly.js": "^1.35.2",
    "prop-types": "^15.5.9",
    "ramda": "^0.26.1",
    "raven-for-redux": "^1.4.0",
    "raven-js": "^3.19.1",
    "rc-slider": "^8.6.1",
    "react": "^16.8.0",
    "react-addons-test-utils": "^15.6.2",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-switch": "^15.5.2",
    "react-confirm-alert": "2.0.7",
    "react-count-animation": "^1.1.3",
    "react-dates": "^18.4.1",
    "react-device-detect": "^1.6.2",
    "react-dom": "^16.8.0",
    "react-draggable": "^3.0.5",
    "react-google-charts": "^3.0.10",
    "react-grid-layout": "^0.16.6",
    "react-height": "^3.0.0",
    "react-helmet": "^5.2.0",
    "react-i18nify": "^1.11.12",
    "react-modal": "^3.5.1",
    "react-notifications": "^1.4.3",
    "react-outside-click-handler": "^1.2.2",
    "react-rangeslider": "^2.2.0",
    "react-raven": "^1.2.3",
    "react-redux": "^7.1.1",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-rte": "^0.16.1",
    "react-scripts": "^2.1.3",
    "react-select": "^2.3.0",
    "react-spinners": "^0.5.1",
    "react-tabs": "^3.0.0",
    "react-test-renderer": "^16.0.0",
    "react-textarea-autosize": "^7.1.0",
    "react-timestamp": "^4.3.0",
    "react-transition-group": "^2.5.0",
    "react-websocket": "^2.0.0",
    "reactstrap": "^7.1.0",
    "recharts": "^1.0.0-beta.10",
    "redux": "^4.0.1",
    "redux-catch": "^1.3.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.5",
    "redux-starter-kit": "^0.7.0",
    "redux-thunk": "^2.3.0",
    "svg-intersections": "^0.4.0"
  },
  "devDependencies": {
    "axios-mock-adapter": "^1.15.0",
    "chai": "^4.1.2",
    "chai-enzyme": "^1.0.0-beta.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "^3.3.4",
    "fetch-mock": "^7.3.0",
    "http-proxy-middleware": "^0.19.1",
    "jasmine-reporters": "^2.2.1",
    "jest-fetch-mock": "^2.1.0",
    "jest-mock-axios": "^2.1.11",
    "jest-serializer-html": "^6.0.0",
    "mock-local-storage": "^1.0.5",
    "redux-devtools-extension": "^2.13.7"
  },
  "scripts": {
    "build-css": "node-sass src/scss/index.scss -o src/css/",
    "flow": "flow",
    "watch-css": "node-sass src/scss/index.scss -o src/css/ --watch",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p build-css watch-css start-js --target-url=localhost --port=8000",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer",
      "jest-serializer-html"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

MacOS Mojave 10.14.1

[gogoku]

Having the same issue with react-native app,
react-native: 0.61.2
react: 16.9.0
react-dom:16.9.0
react-devtools: 4.2.0

i also get a warning in the app, "react-devtools agent got no connection"

created a new app with react-native-cli and getting the same error

[serslon]

Hi, all.
I also get the same problem with the Unsupported React version detected message.
I have start research a problem and finally found it. The problem has hidden in external components that are using react-dom as a dependency.
In my case its the react-hubspot-form component.
In the case @LukenAgile42 its the react-modal component (I think, I have found only one component, probably the project contains more the same components).

As conclusion. I want to say - need upgrading all components or use custom components.

[serslon]

Or as I suppose the problem can be the injection external file in a component.

[bvaughn]

Closing this issue since it still does not have a repro case and hasn't been commented on in a while.

We can re-open it if a repro case is added! 🙇