Search code examples
reactjswebpackgoogle-chrome-devtoolscreate-react-appprofiler

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


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!

profiler with wrong source file links as if there was no source map

stack trace made with console.trace that shows proper source file names


Solution

  • 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