Failed to compile. Error in ./src/reportWebVitals.js. reportWebVitals.js: 'import' and 'export' may only appear at the top level (3:4)

Question

I can not see the problem in webvital.js. I intalled react-router-dom twice and then this error ocurred and I broke my code. I found that a solution can be to start the project from cero, but that didn't work. I also installed webvitals but it is still appears the same bug. Can anyone have a clue what will be the solution? I can see properly the proyect in github but no in my pc. It is not deploying well and is not actualizing the webpage. Thank you so much for the help! :) This is 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;

This is the error:

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

This is the 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")
);

Answer 1

I had the same problem, I went ahead with an npm install then npm audit fix --force command. After this, I relaunched my React application and it worked!

Answer 2

Had the same problem and running this command fixed it, thanks to an answer in this thread.

npm install react-router-dom --save