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

Question

我想要将我的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);

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

Answer 1

它已经告诉您错误是什么了

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

您可以执行的操作：

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

getLCP.then(...your code)

Answer 2

您必须在top of the file中对函数/方法进行import，然后才能使用它。

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

你可以阅读here文档

然后将其用作

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