Andrew Connell

Fix SharePoint Framework projects to enable the React DevTools profiler

By default, the build toolchain for SharePoint Framework projects that use React aren’t supported by the React DevTools profiler tool. In this post, you’ll learn why and how to fix it.

A few years ago, React introduced the React Profiler to React v16.5 in the React DevTools plugin available for Chromium browsers (Chrome & CrEdge) and Firefox.

Developers can use the Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications.

For those of us creating React apps in SharePoint Framework (SPFx) solutions, this is a great resource for building well performing apps for your customers!

Cool right?

Sure… it’s cool… but when you try to use it, it won’t work & throws an error.

In this post, learn why the React DevTools Profiler doesn’t work for SharePoint Framework projects & how to fix it!

Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP
Written by Andrew Connell

Andrew Connell is a web developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to delivering industry-leading on-demand video training to professional developers. He lives with his wife & two kids in Florida.