React Dev Tools not working with .NET core react+redux Visual Studio 2019 application

[francotiveron]

I have an application which I inherited and have to maintain it (cannot contact who developed it). This application has been crated using Visual Studio, as a .NET Core Web App with C# back-end and react+redux frontend (react+redux template).

I am using Visual Studio 2019, and I can open, build and run the application just fine. The problem I have is when I want to debug the front-end. When I open Chrome's dev tools (with react dev tools for Chrome extension installed), the extension doesn't detect react ("This page doesn’t appear to be using React").

To verify that my environment is healthy, I create a brand new app and the react dev tools work just fine, as they should.

I compared project configurations, appsettings.json, launchSetting.json and the Startup.cs for middleware and services, with no luck. I am asking whether someone can give me hints or clues on what could be missing or what else can I try

[bvaughn]

Sounds like you're using an older version of React, from the behavior you described. DevTools version 4 (the one in the Chrome store) only supports React versions 15 and newer.

If you need to install the previous extension version, to work with older copies of React, you can do that like so:

# Checkout the extension source
git clone https://github.com/facebook/react-devtools

cd react-devtools

# Checkout the previous release branch
git checkout v3

# Install dependencies and build the unpacked extension
yarn install
yarn build:extension

# Follow the on-screen instructions to complete installation

If this answers your question, please close this issue. If you think the cause is something else, we'll need you to provide more information (including a repro case) before we could help.

[francotiveron]

I don't think that is the case. See the project's package.json, it says react version is 16.4.2 ` { "name": "ssap.portal.jsclient", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "1.4.3", "@material-ui/icons": "2.0.1", "@material-ui/lab": "1.0.0-alpha.9", "@navjobs/upload": "3.1.3", "autosuggest-highlight": "3.1.1", "axios": "0.18.0", "axios-extensions": "3.0.3", "immutability-helper": "2.7.1", "material-ui-chip-input": "1.0.0-beta.6", "mdi-material-ui": "5.2.0", "material-ui-search-bar": "1.0.0-beta.9", "material-ui-toggle-icon": "1.0.1", "material-ui-image": "3.0.0", "mui-datatables": "2.0.0-beta-20", "npm": "6.3.0", "react": "16.4.2", "react-dom": "16.4.2", "react-autosuggest": "9.3.4", "react-lifecycles-compat": "3.0.4", "react-redux": "5.0.7", "react-router-dom": "4.3.1", "react-router-redux": "5.0.0-alpha.9", "reselect": "3.0.1", "react-copy-to-clipboard": "5.0.1", "react-scripts": "1.1.4", "redux": "4.0.0", "redux-debounced": "0.5.0", "redux-logger": "3.0.6", "redux-thunk": "2.3.0", "rimraf": "2.6.2" }, "scripts": { "start-env": "cross-env NODE_PATH=./src PORT=44311 \"rimraf ./build && react-app-rewired start\"", "build-env": "cross-env NODE_PATH=./src react-app-rewired build", "test-env": "cross-env NODE_PATH=./src react-app-rewired test --env=jsdom", "start": "rimraf ./build && react-app-rewired start", "build": "cross-env NODE_PATH=./src react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-app-rewired eject" }, "devDependencies": { "cross-env": "5.2.0", "react-app-rewire-hot-loader": "1.0.1", "react-app-rewired": "2.0.0", "react-hot-loader": "4.3.1" } }

`

[bvaughn]

I see. From the behavior described, it sure sounds like DevTools has detected an older, unsupported version of React. 🤔

We'll need you to provide more information (including a repro case) before we could help any further though. A package.json isn't enough information unfortunately.

[caspercasanova]

Hey @francotiveron have you found any resolution?

[francotiveron]

No, I haven't. Unfortunately I can't share the code. I try to repro it, but no luck.

[bvaughn]

Going to close this issue for now then. It's not really actionable with the info provided. We can reopen if you get more info to share!