Table of Contents
React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.
At the moment, the only way to enable production profiling in CRA apps is to eject and modify the production Webpack configuration file (config/webpack.config.prod.js
) as shown below:
module.exports = {
output: {
alias: {
'react-dom': 'react-dom/profiling',
'schedule/tracking': 'schedule/tracking-profiling',
},
},
};
react-dom@^16.5.0
/ [email protected]
Note that if you're using the
schedule
package v0.3.0 you should declare the following alias instead:
module.exports = {
output: {
alias: {
'react-dom': 'react-dom/profiling',
'schedule/tracking': 'schedule/cjs/schedule-tracking.profiling.min'
},
},
};
If you are using Webpack 4 to bundle your apps, add the following import aliases to your production config:
module.exports = {
//...
resolve: {
alias: {
'react-dom': 'react-dom/profiling',
'schedule/tracking': 'schedule/tracking-profiling',
}
}
};
react-dom@^16.5.0
/ [email protected]
Note that if you're using the
schedule
package v0.3.0 you should declare the following alias instead:
module.exports = {
//...
resolve: {
alias: {
'react-dom': 'react-dom/profiling',
'schedule/tracking': 'schedule/cjs/schedule-tracking.profiling.min'
}
}
};
Both your application and react-dom
need to use the same schedule
version in order for tracking to work. NPM may install multiple copies if the versions don't match, in which case your application will end up tracking interactions with a difference package than react-dom
reads them from.
The safest way to ensure that this does not happen is to copy the exact schedule
version that react-dom
specifies as a dependency.
For example, assuming you are using react-dom
version 16.5.0 you can find which version of schedule
to use by running:
➜ npm view [email protected]
dependencies:
loose-envify: ^1.1.0 object-assign: ^4.1.1 prop-types: ^15.6.2 schedule: ^0.3.0
The above output shows that [email protected]
depends on schedule@^0.3.0
, so your application code will also want to use that exact version.
If you're not sure if mismatching versions are installed, you can use npm ls schedule
to check:
➜ npm ls schedule
[email protected] /Users/bvaughn/Desktop/test-schdeule
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
├─┬ UNMET DEPENDENCY [email protected]
│ └── UNMET DEPENDENCY [email protected]
└── UNMET DEPENDENCY schedule@^0.2.0
In the above example react-dom
and my application are depending on different versions of schedule
. This will result in multiple copies of the package being installed (one in node_modules/schedule
and another in node_modules/react-dom/node_modules/schedule
).
You can fix this by updating your app to use the exact version react-dom
is using:
➜ npm i schedule@^0.3.0
➜ npm ls schedule
[email protected] /Users/bvaughn/Desktop/test-schdeule
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
Yarn users can check to see if mismatching versions are installed using yarn why
:
➜ yarn why schedule
[1/4] 🤔 Why do we have the module "schedule"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "schedule"
info This module exists because it's specified in "dependencies".
=> Found "react-dom#[email protected]"
info This module exists because "react-dom" depends on it.
=> Found "react#[email protected]"
info This module exists because "react" depends on it.
✨ Done in 0.70s.
You can fix this by updating your app to use the exact version react-dom
is using:
➜ yarn add schedule@^0.3.0
➜ yarn why schedule
[1/4] 🤔 Why do we have the module "schedule"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "schedule"
info Reasons this module exists
- Specified in "dependencies"
- Hoisted from "react-dom#schedule"
- Hoisted from "react#schedule"