解决方法：./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

显然，我的反应脚本似乎已经被更新或降级，这导致了这个问题。我用过

npm uninstall react-scripts 

之后，

npm install react-scripts

我的问题就解决了。