如何解决：./src/reportWebVitals.js 中的错误语法错误：'import' 和 'export' 可能只出现在顶层

Question

我在没有备份包的情况下愚蠢地使用了命令 npm audit fix --force，现在我在我的 react 应用程序中发现了一些错误。

每当我启动应用程序时，我都会收到错误消息：

./src/reportWebVitals.js 中的错误 语法错误：'import' 和 'export' 可能只出现在顶层

我该如何解决？

我的 reportWebVitals.js 文件如下所示：

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

export default reportWebVitals;

我的 package.json 看起来像这样：

{
  "name": "duran_supplements_and_workout_equipment",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "http-proxy-middleware": "^2.0.1",
    "mongoose": "^5.12.13",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^0.9.5",
    "socket.io-client": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
  "author": "",
  "license": "ISC"
}

Answer 1

显然我的 react-scripts 似乎已经更新或过时，这导致了问题。我用过

npm uninstall react-scripts 

之后

npm install react-scripts

我的问题解决了。