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!

szym · Accepted Answer · 2021-03-30 16:35:01Z

4

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

answered Mar 30, 2021 at 16:35

szym

3,1982 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Foxhoundn Over a year ago

It's kinda nuts how far you have to go with CRA to have the most basic functionality - I thought it's whole purpose was to be easy to use out of the box?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related