plugin:vite:import-analysis Failed to resolve import “../components/x.vue” from “srcrouterindex.js”. Does the file exist?

In my Vue JS application, I have the following js inside src/routes

index.js

import { createRouter, createWebHistory } from "vue-router";
import Dashboard from '../views/Dashboard.vue';
import Customers from '../views/Customers.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import DefaultLayout from '../components/DefaultLayout.vue';
import AuthLayout from '../components/AuthtLayout.vue';
import store from "../store";

const routes = [
        {
        path : '/',
        redirect : '/dashboard',
        component : DefaultLayout,
        meta : { requiresAuth : true },
        children : [
            {path : '/dashboard', name : 'Dashboard', component : Dashboard},
            {path : '/customers', name : 'Customers', component : Customers}
        ]
    },

    {
        path : '/auth',
        redirect : '/login',
        name : 'Auth',
        component : AuthLayout,
        children:[

                {
                    path : '/login',
                    name : 'Login',
                    component : Login,
                },

                {
                    path : '/register',
                    name : 'Register',
                    component : Register,
                },
            
        ],
    },

    
];

const router = createRouter({
    history : createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    if(to.meta.requiresAuth && !store.state.user.token){
        next({name : 'Login'})
    } else if (store.state.user.token && ( to.name === 'Login' || to.name === 'Register' )  ) {
        next({ name : 'Dashboard' });
    } else{
        next ()
    }
})

export default router;

And I have the following Login.vue inside src/views.

<template> 
      <div>
        <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow" />
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          Sign in to your account
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          Or
          {{ ' ' }}
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
            start your 14-day free trial
          </a>
        </p>
      </div>
      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true" />
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address" />
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required="" class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password" />
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
            <label for="remember-me" class="ml-2 block text-sm text-gray-900">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <LockClosedIcon class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
            </span>
            Sign in
          </button>
        </div>
      </form>
</template>

<script>
import { LockClosedIcon } from '@heroicons/vue/solid'

export default {
  components: {
    LockClosedIcon,
  },
}
</script>

Then I have a component called, AuthLayout.vue inside src/components

<template> 
  <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { LockClosedIcon } from '@heroicons/vue/solid'

export default {
  components: {
    LockClosedIcon,
  },
}
</script>

Every time I tried to run my application, it kept giving me the following errors.

[plugin:vite:import-analysis] Failed to resolve import “../components/AuthtLayout.vue” from “srcrouterindex.js”. Does the file exist?

When I comment import AuthLayout from '../components/AuthtLayout.vue'; from the index.js application runs fine. But every time I try to enable it, it gives me an error.

I’m using tailwind CSS and Vue 3