No puedo ver el problema en webvital.js. Instalé react-router-dom dos veces y luego ocurrió este error y rompí mi código. Descubrí que una solución puede ser comenzar el proyecto desde cero, pero eso no funcionó. También instalé webvitals pero sigue apareciendo el mismo error. ¿Alguien puede tener una idea de cuál será la solución? Puedo ver correctamente el proyecto en github pero no en mi pc. No se está implementando bien y no está actualizando la página web. ¡Muchas gracias por la ayuda! :) Esto es 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;

Este es el 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

Este es el 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") );