误执行npm add后React App无法运行 出现import/export语法错误

问题原因 #

你误执行的npm add等价于npm install，会把命令后跟随的参数（也就是你原本要传给git add的路径参数）识别为要安装的npm包，大概率直接改写了对应路径下的reportWebVitals.js文件内容，导致原本的顶层import/export语句被嵌套进了其他代码块内部，触发语法错误。

报错信息：
编译失败，./src/reportWebVitals.js 文件报错：Syntax error: 'import' and 'export' may only appear at the top level (4:4)

解决方案 #

• 打开src/reportWebVitals.js文件，检查第四行及上下位置的代码，确认是否有import/export被包裹在函数、条件判断等非顶层代码块中。
• 如果你不记得原文件内容，可以直接用React项目默认的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;

• 保存文件后重新执行npm run start启动项目，验证编译是否恢复正常。
• 若仍有同类报错，检查你执行npm add时命令后跟随的其他路径对应的文件，是否被意外修改，恢复对应文件的原有代码即可。

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