Allow to opt-in React DOM profiling without ejecting

[dio]

Is this a bug report?

No

Expected Behavior

CRA should be able to opt-in to React DOM profiling without ejecting.

Actual Behavior

Need to eject to enable React DOM profiling, as mentioned in https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#create-react-app

[gaearon]

Yeah we'll want to add this. In the meantime you can edit node_modules/react-scripts/config/webpack.config.prod.js. Won't persist the changes between installs but handy for local profiling.

[dio]

Got it. Thank you @gaearon for a quick reply!

[jpierson-at-riis]

I'm having trouble getting the Profiling tools working in Chrome while using CRA start script via npm start. When I look for the above mentioned file node_modules/react-scripts/config/webpack.config.prod.js to attempt a workaround I don't see it in node_modules.

I'm also not sure why I'm getting the following message in the dev tools seeing that I'm using an adequate version of react (18.2.0 with react-scripts 5.0.1) and a non-production build (npm start).

Profiling not supported.
Profiling support requires either a development or profiling build of React v16.5+.

Learn more at reactjs.org/link/profiling.

Is there still a workaround to getting the profiling working locally or should this already be working out of the box?

[jpierson-at-riis]

Interesting, I must have been hitting something different because after a bit of tinkering I tried removing the custom environment variables that I have set up for our project to set the PORT and HTTP variables and that seems to have allowed the profiler to work. Specifically it seems that setting PORT to a custom value of 8281 had caused the profile feature to stop working in the Chrome React DevTools Extension. Perhaps this is a detail of how that extension specifically activates or is to the webpack build in CRA that perhaps is disabling profiling when not running on port 3000 specifically?