如何在我的 React 应用程序中修复此语法错误？答案

【问题标题】：How to fix this Syntax Error in my React App?如何在我的 React 应用程序中修复此语法错误？
【发布时间】：2021-12-19 05:23:41
【问题描述】：

我想将我的 React 应用程序部署到 github，我运行以下命令：

npm run deploy

但我不断收到此错误消息：

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (3:4)

  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);

你能帮我解决这个问题吗？

【问题讨论】：

标签： reactjs github npm terminal

【解决方案1】：

它已经告诉你错误是什么

'import' 和 'export' 只能出现在顶层

你可以做什么：

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

getLCP.then(...your code)

【讨论】：

【解决方案2】：

你必须importtop of the file处的函数/方法，然后才能使用它。

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

您可以阅读文档here

然后用作

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

【讨论】：