Yarn Build出现TS2305错误：web-vitals模块不存在ReportHandler导出成员

嘿，我之前也碰到过一模一样的问题！这个错误本质上是web-vitals版本和项目代码不兼容导致的——新版的web-vitals（v2及以上）已经移除了ReportHandler这个导出类型，而你的示例项目代码是基于旧版web-vitals（v1.x）写的。

给你几个可行的解决办法，挑一个适合你的：

方法一：降级web-vitals到兼容版本 #

这是最省心的办法，直接把web-vitals降到和示例项目匹配的v1.x版本：

1. 执行这个命令：

   yarn add web-vitals@1.1.2
   

2. 等依赖安装完成后，再跑yarn build，应该就能正常编译了。

方法二：修改代码适配新版web-vitals #

如果你不想降级依赖，也可以修改reportWebVitals.ts（或对应的tsx/jsx文件）的代码，适配web-vitals v2的API：
把原来的代码替换成下面的内容：

import { type Metric } from 'web-vitals';

// 自己定义ReportHandler类型
type ReportHandler = (metric: Metric) => void;

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && typeof onPerfEntry === 'function') {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

这个写法自己定义了ReportHandler类型，完美适配新版web-vitals的类型系统。

补充排查点 #

• 你可以先打开package.json看看当前web-vitals的版本号，如果是^2.0.0或者更高，就肯定是版本不兼容的问题。
• 之前你尝试重新安装web-vitals没用，是因为默认装的还是最新版，所以必须指定旧版本号才行。

备注：内容来源于stack exchange，提问作者Steve