使用JavaScript Prisma对接MySQL后，React Web应用编译失败求助

问题概述 #

我正在开发一个React Web项目，通过Prisma对接Aiven托管的MySQL，调用Twitter API实现自动发帖。目前遇到编译失败，报错指向src/reportWebVitals.js文件，具体错误信息如下：

Failed to compile.

Error in ./src/reportWebVitals.js
Syntax error: 'import' and 'export' may only appear at the top level (3:0)

1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {

3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);

@ ./src/index.js 19:23-54

原因分析 #

ES模块的import语句（包括动态import()）在旧版Babel/Create React App配置中，不允许放在函数内部的条件语句块里，当前编译环境的语法检查规则要求import必须处于文件顶层位置。

解决方案 #

有两种直接可行的修复方式：

方式1：改用顶层静态导入 #

将web-vitals的导入移到文件顶部，完全符合ES模块语法规范：

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;

方式2：保留动态导入但调整逻辑（适合懒加载场景） #

如果需要通过动态导入实现懒加载，可以将动态import()改为await调用，同时调整函数结构：

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

export default reportWebVitals;

注：这种方式需要将函数改为async，但Create React App默认的index.js调用逻辑无需额外调整，不影响功能正常运行。

验证修复 #

修改代码后重新执行npm start或yarn start，编译即可正常通过。

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