已安装web-vitals仍无法解析./reportWebVitals的问题求助

云原生阿岚

2026-8-20

解决Module not found: Can't resolve './reportWebVitals'问题

确认本地是否存在reportWebVitals.js文件

这个文件是Create React App初始化项目时自动生成的本地文件，并非web-vitals依赖包提供的内容。如果src目录下没有这个文件，手动创建它，内容如下：

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

检查导入路径的正确性
确保src/index.js中的导入语句是import reportWebVitals from './reportWebVitals';，注意路径拼写、文件名大小写（Linux/macOS系统对大小写敏感）。
清除依赖缓存并重新安装
执行以下命令清除旧依赖并重新安装：
```
rm -rf node_modules
rm package-lock.json
npm install
```
如果使用yarn，则替换为：
```
rm -rf node_modules
rm yarn.lock
yarn install
```
检查自定义webpack配置（非CRA项目）
如果你是自定义webpack项目，检查webpack.config.js中的resolve配置，确保没有错误的alias或modules设置导致无法解析本地文件。