How to get correct links to source files in DevTools profiler in Create React App?

Question

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!

Answer 1

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