时间戳

首页 > 解决方案 > 如何在我的 React 应用程序中修复此语法错误？

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

问题描述

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

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

标签： reactjsgithubnpmterminal

解决方案

您必须先import使用函数/方法，top of the file然后再使用它。

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

你可以在这里阅读文档

然后用作

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

推荐阅读