I've created a basic Create React App with TypeScript template
npx create-react-app cra-test --template typescript
I added just a simple MyButton
component and passed a on click handler to it.
When I'm profiling it with Chrome DevTools links to the source in the profiler are incorrect and not working as if there where no source maps.
When I run console.trace
in my onClick handler stack trace looks good.
How can I get correct links to source files in the profiler tab working?
Thanks!
In order to get this working you need to change webpack's setting
devtool: 'eval-source-map'
You can set it using config-overrides.js
(react-app-rewired).
Probably there are some other source map types that will work but that one gives you the most detailed information. More on source map types here
https://webpack.js.org/configuration/devtool/
You can read about devtool
setting here.
https://webpack.js.org/guides/development/#using-source-maps