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.
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"
]
}
}