How to resolve import and export error in reportWebVitals.js

Question

I am new to coding with React.js and monday.com. I am trying to create a weather app that works with monday.com. I want the app to use the location column on the monday.com board to display the weather data for a specific city. My api seems to work just fine and gives the weather results when I enter a city into my app. The below error occurred once I started to try and get the app to work with the monday.com board.

I have an import/export error. I have checked all my opening and closing brackets but they all seem correct. Please advise how I can fix this problem. Thanks!

Error:
Error in ./src/reportWebVitals.js
Syntax error: C:/Users/E7470/weather-app/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

App.js:

import React, { useState } from 'react';
import './App.css';
import mondaySdk from 'monday-sdk-js';
import 'monday-ui-react-core/dist/main.css';
//Explore more Monday React Components here: https://style.monday.com/
import AttentionBox from 'monday-ui-react-core/dist/AttentionBox.js';

const monday = mondaySdk();


      

function App() {
  const apiKey = 'API KEY'; //I inserted my api key here
  const [weatherData, setWeatherData] = useState([{}]);
  const [city, setCity] = useState('');

  const [context, setContext] = useState();
const [weatherArr, setWeatherArr] = useState();

useEffect(() => {
  const getContext = async () => {
    try {
      monday.listen('context', (res) => {
        console.log(res.data);
        getBoards(res.data);
        setContext(res.data);
      });

      monday.listen("settings", (res) => {
        console.log(res.data);
        setMeasurementUnit(res.data.dropdown)
      })

      //board id (Add board Id Here eg.328567743)
    } catch (err) {
      throw new Error(err);
    }
  };
  getContext();
}, []);

const getBoards = async (context) => {
  try {
    var arr = [];
    var boards = [];
    for( const boardId of context.boardIds){
      var res = await  monday.api(`query { boards(limit:1, ids:[${boardId}]) {
        name  
        items {
          name
          column_values {
            id
            value
            text
          }
        }
        }
      }`);
    boards.push(res.data.boards);  
    }

   for (const board of boards ){
    console.log(boards)
    console.log(board)
    for (const item of  board[0].items){
      var location = item.column_values[0].text;
      var latLng = item.column_values[0].value
      var itemObj = {
        location,
        latLng
      }

  const getWeather = (event) => {
    if (event.key == 'Enter') {
      fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperil&APPID=${apiKey}` //api given in video tutorial
      )
        .then((response) => response.json())
        .then((data) => {
          setWeatherData(data);
          setCity('');
        });
    }
  };

  setWeatherArr(arr);
} catch (err) {
  throw new Error(err);
}
};

  return (
    <div className="container">
      <input
        className="input"
        placeholder="Enter City..."
        onChange={(e) => setCity(e.target.value)}
        value={city}
        onKeyPress={getWeather}
      />

      {typeof weatherData.main === 'undefined' ? (
        <div>
          <p>Welcome to weather app! Enter the city you want the weather of.</p>
        </div>
      ) : (
        <div className="weather-data">
          <p className="city">{weatherData.name}</p>
          <p className="temp">{Math.round(weatherData.main.temp)}℉</p>
          <p className="weather">{weatherData.weather[0].main}</p>
        </div>
      )}

      {weatherData.cod === '404' ? <p>City not found.</p> : <></>}
    </div>
  );
}


export default App;

App.css:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px;
 }

 .input {
padding: 15px;
width: 80%;
margin: auto;
border: 1px solid lightgrey;
border-radius: 6px;
font-size: 16px;
 }

 .input:focus{
  outline: none;
 }

 .weather-data{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
 }

 .city{
  font-size: 30px;
  font-weight: 200;
 }

 .temp{
  font-size: 90px;
  padding: 10px;
  border: 1px solid lightgray;
  border-radius: 12px;
 }

 .weather{
  font-size: 30px;
  font-weight: 200;
 }