React启动报错：无法解析'./reportWebVitals'，请求技术协助

报错核心原因 #

你的React项目src目录中缺少reportWebVitals.js文件，或者index.js里的引入路径/调用语句有误，导致webpack无法找到该模块。

具体解决步骤 #

• 手动创建缺失的文件
  在项目的src文件夹下新建reportWebVitals.js，粘贴以下默认代码：

  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;
  

• 检查index.js的引入与调用
  打开src/index.js，确认包含以下代码：

  import reportWebVitals from './reportWebVitals'; // 确保路径无拼写错误
  // ... 其他项目代码
  reportWebVitals(); // 文件末尾的调用语句
  

  若缺失则直接补上。

• 修正依赖安装方式
  此前使用--save-dev安装web-vitals的方式错误，该包属于运行时依赖，需执行以下命令重新安装：

  npm install web-vitals --save
  

完成上述操作后，重新执行npm run start即可正常启动项目。

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