执行npm audit fix --force后React报reportWebVitals.js的import/export顶层错误如何解决

执行npm audit fix --force后，你的项目依赖中的react-scripts被强制降级到了0.9.5版本，该版本的编译工具链不支持ES动态import()语法。而reportWebVitals.js中在函数内部使用了动态import()加载web-vitals包，旧版本编译器无法识别该语法，会将其判定为非法的静态import声明，因此抛出"'import' and 'export' may only appear at the top level"的语法错误。

推荐优先使用方案一，彻底解决版本兼容问题；如果暂时不需要升级工具链，可直接用方案二快速修复。

方案一：升级react-scripts到适配版本 #

你当前使用的React版本为17.x，对应适配的稳定react-scripts版本为4.0.3，按以下步骤操作即可：

• 安装指定版本的react-scripts：

npm install react-scripts@4.0.3 --save-exact

• 删除旧依赖缓存与锁文件，避免版本冲突：

rm -rf node_modules
rm package-lock.json

• 重新安装所有依赖：

npm install

• 执行启动命令验证修复效果：

npm start

方案二：修改reportWebVitals.js的导入语法 #

如果暂时不需要升级工具链，可直接将动态导入改为顶层静态导入，即可绕过语法校验：
修改src/reportWebVitals.js的内容为以下代码：

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

const reportWebVitals = onPerfEntry => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    getCLS(onPerfEntry);
    getFID(onPerfEntry);
    getFCP(onPerfEntry);
    getLCP(onPerfEntry);
    getTTFB(onPerfEntry);
  }
};

export default reportWebVitals;

该改动仅取消了web-vitals包的按需加载逻辑，对普通项目的运行性能几乎无影响。

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