I recently upgraded React and several other packages to their latest versions, and every since, have been seeing warning messages in my Chrome console referring to bundled files instead of mapped files.
Example: at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25)
instead of at SelectInput (Select.tsx:123)
I'm using the latest versions of chrome and React Devtools.
Here are my dependency versions in package.json
:
dependencies {
"@babel/runtime": "^7.18.3",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@types/node": "^15.12.2",
"@types/react": "^18.0.12",
"@types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3"
}
I see this older solution Console logging error on bundle.js instead of React component but cannot find webpack.config.js
to make updates, nor am I sure if it applies to these newer package updates.
How can I see the mapped file names in the chrome console?