React 18项目中React Profiler提示时间线分析不支持的问题排查

问题描述 #

在Mac的Chrome浏览器中调试React 18应用，已安装最新版React DevTools扩展，进入Profiler标签页点击录制时，弹出错误提示：

Timeline profiling not supported. Timeline profiler requires a development or profiling build of react-dom@^18.

已按照官方文档添加<Profiler>组件，但问题仍未解决，已查看React DevTools显示的应用运行模式截图、提供了项目中React的完整引入代码。

排查步骤 #

1. 确认当前构建模式是否符合要求 #

• 开发模式验证：
  • Create React App项目需运行npm start（而非npm run build），默认启用开发构建；
  • Vite项目需运行vite（而非vite build），开发环境默认保留profiling能力；
  • Webpack手动配置时，确保mode字段设为development，未强制将react-dom替换为生产版本。
• 若需使用性能更优的profiling构建，可直接引入专属版本：

  // 替换原react-dom引入语句
  import ReactDOM from 'react-dom/profiling';
  import { unstable_trace } from 'react-dom/profiling';
  

2. 检查React与react-dom版本一致性 #

运行npm list react react-dom或yarn list react react-dom，确认两者版本均为^18.x.x且完全匹配（不能出现一个18.2.0、一个18.1.0的情况）。

3. 验证React DevTools识别的运行模式 #

打开React DevTools的「Components」标签页，查看顶部状态栏：

• 显示「Development mode」或「Profiling mode」为正常状态；
• 若显示「Production mode」，说明当前是生产构建，不支持Timeline profiling。

4. 排查第三方工具的强制替换行为 #

部分打包插件、CDN加速工具或代码压缩插件可能自动将react-dom替换为生产版本，检查项目的webpack/vite配置文件，确认无此类强制替换逻辑。

5. 确认组件的正确使用 #

<Profiler>必须指定id属性，且包裹在应用根组件外层：

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  // 可选：在这里记录性能数据
}

ReactDOM.render(
  <Profiler id="app" onRender={onRenderCallback}>
    <App />
  </Profiler>,
  document.getElementById('root')
);

内容的提问来源于stack exchange，提问作者VikR