reactjsreact-devtoolsreact-developer-tools

React developer tools doesn't show the component name


I just created a reactjs project and installed the react developer tools 5.1.0 rev. b566064da extension, I started up my sample project with npm start it works fine, I can access the web page through the URL http://localhost:3000. However, when I try to find out the name of the component in the source tag it doesn't show me the name, instead it shows bundle.js:190 as shown in the image below.

brave-screenshot

How can I fix this?

I've tried several browsers such as Chrome, Edge, Firefox and Brave, and in all cases the result is the same.

This is my package.json (This is the default configuration, I haven't edit it)

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution

  • It seems that in the d66fa02a30 on 9/26/2024 revision it is already fixed.

    react-componets-extension