Bug: React.Profiler no longer works in production builds after upgrading to React 19

[yesquesasi]

React version: 19.0.0

Steps To Reproduce

1. Clone this repo: https://github.com/yesquesasi/webpack-5-react-boilerplate
2. Checkout to branch react-profiler-test
3. Install dependencies: yarn install
4. Create a production build: yarn build
5. Run the application: yarn prod
6. Open page in browser: http://localhost:8005/
7. Open browser console, an error appears: Uncaught TypeError: Cannot read properties of undefined (reading 'd')

I've forked the repo webpack-5-react-boilerplate, which is a perfectly working React 19 + Webpack repository, adding the code the React.Profiler documentation points out to to enable React.Profiler in production, you can see that code in this PR - with this you can reproduce the error that I'm seeing in another larger application.

The current behavior

I have a larger application using React.Profiler in production, I followed the steps to enable it and everything was working as expected, I was using react@18.3.1 and react-dom@18.3.1

After upgrading to react@19.0.0 (and even 19.1.0) I started seeing that React.Profiler no longer worked in the production build (it does work in development tho) having a very similar runtime error to the one above when I opened any page: Uncaught TypeError: Cannot read properties of undefined (reading 'd'), since it's the production build everything is minified and I haven't had luck finding more details about the error.

Research made

I compared the code inside node_modules for react-dom@18.3.1 and react-dom@19.0.0 to see if I was able to find any ways to fix it, but had no luck. The main difference between those 2 versions are:

The exported configuration in package.json

We have this for react-dom@18.3.1 in package.json

....
  "exports": {
    ".": "./index.js",
    "./profiling": "./profiling.js", 
    ....

whereas in react-dom@19.0.0 in package.json the exports values are quite different using default:

...
"exports": {
    ".": {
      "react-server": "./react-dom.react-server.js",
      "default": "./index.js"
    },
    "./profiling": {
      "react-server": "./profiling.react-server.js",
      "default": "./profiling.js"
    },
....

I thought this meant I needed to change the way I create the alias in my webpack config, but I tried several different ways and nothing worked while building

'react-dom$': 'react-dom/profiling' // original code from documentation (causing bug)

'react-dom$': 'react-dom/profiling/default' // fails to build
'react-dom$': 'react-dom/profiling.default' // fails to build
'react-dom$': 'react-dom/profiling/profiling.js' // fails to build

Contents of profiling.js

Looking again at the differences in versions in node_modules I found that the file that ends up being export by react-dom/profiler.js changed from versions, the one in react-dom@18.3.1 was minified whereas the one in react-dom@19.0.0 is not precisely minified.

I had no further findings in this area but I've updated the node modules to a repo for easier comparision:

react-dom@19.0.0 - profiling.js
react-dom@19.0.0 - cjs/react-dom-profiling.profiling.js

VS

react-dom@18.3.1 - profiling.js
react-dom@18.3.1 - cjs/react-dom.profiling.min.js

The expected behavior

I'd appreciate your help to find out why this is not working and how to fix it.

[eps1lon]

The instructions are outdated unfortunately. You have to alias react-dom/client to react-dom/profiling instead.