编译失败。 ./src/reportWebVitals.js 中的错误。 reportWebVitals.js：“导入”和“导出”可能只出现在顶层 (3:4)

Posted 2023-02-22

【中文标题】编译失败。 ./src/reportWebVitals.js 中的错误。 reportWebVitals.js：“导入”和“导出”可能只出现在顶层 (3:4)

【英文标题】：Failed to compile. Error in ./src/reportWebVitals.js. reportWebVitals.js: 'import' and 'export' may only appear at the top level (3:4)

【发布时间】：2022-01-14 18:16:58

【问题描述】：

我在 webvital.js 中看不到问题。我安装了 react-router-dom 两次，然后发生了这个错误，我破坏了我的代码。我发现一个解决方案可以是从 cero 启动项目，但这不起作用。我还安装了 webvitals，但它仍然出现相同的错误。谁能知道解决方案是什么？我可以在 github 中正确看到项目，但在我的电脑中看不到。它没有很好地部署，也没有实现网页。十分感谢你的帮助！ :) 这是reportWebVirials.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;

这是错误：

Failed to compile.

Error in ./src/reportWebVitals.js
Syntax error: D:/ELEARNING PATH/CURSADA/PROYECT/PROYECT REWARDS STORE/store-lopez-andrea/src/reportWebVitals.js: '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);

 @ ./src/index.js 19:23-51

这是 index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import AppProvider from "./context/AppContext";
import  BrowserRouter  from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <AppProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

【参考方案1】：

由于this 线程中的回答，遇到了同样的问题并运行此命令修复了它。

npm install react-router-dom --save

【讨论】：

我试过了，但没有:(

【参考方案2】：

我遇到了同样的问题，我继续进行 npm install 然后 npm audit fix --force 命令。在此之后，我重新启动了我的 React 应用程序并且它工作了！

【讨论】：

这对我有用！我爱这个社区。感谢您的帮助！