A list of "random" errors when importing a react component to index

I am making a simple register/login auth using jwt, express and react and I am getting these errors when importing dashboard,js into index.js:

I can't seem to understand why these errors are there and how to fix them. It happens after I import (before I use) the dashboard component.

Login.js:

import './App.css';
import React, { Component } from 'react';
import { useState } from 'react';
import axios from 'axios';
import {useNavigate} from 'react-router-dom';


function Login() {

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const navigate = useNavigate();

  async function registerUser(e){
    e.preventDefault();
    const response = await axios.post('/api/users/login', 
      {
        email,
        password
      }
    ).then(
      res => {
        if (res.data.user){
            localStorage.setItem('token', res.data.user)
            alert('login successful')
            navigate('/dashboard')
        } else{
            alert('error')
        }
      }
    )
  }

  return (
    <div>
      <form onSubmit={registerUser}>

        <input type="email" placeholder="Email" 
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <br />


        <input type="password" placeholder="Password" 
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <br />

        <input type='submit' value='Register' />

      </form>
    </div>
  );
}

export default Login;

DashBoard.js:

import React, { useEffect } from 'react';
import {useNavigate} from 'react-router-dom';
import jwt from 'jsonwebtoken';

function DashBoard(){

    const navigate = useNavigate()

    useEffect(() => {
        console.log('here')
        const token = localStorage.getItem('token')
        if (token){
            const user = jwt.decode(token)
            if (!user){
                localStorage.removeItem('token')
                navigate('/login')
            }
        }
    })

    return(
        <div>
            <h1>
                Hi
            </h1>
        </div>
    );
}


export default DashBoard;

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Register from './Register';
import Login from './Login';
import DashBoard from './DashBoard';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Routes } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path='/register' element={<Register />} />
        <Route path='/login' element={<Login />} />
        <Route path='/dashboard' element={<DashBoard />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);