I am a beginner in react and am trying to follow this tutorial (https://www.youtube.com/watch?v=_W3R2VwRyF4) on youtube. I am trying to test out the button component I am building, but I keep getting an error message:

“[plugin:vite:import-analysis] Failed to resolve import “src/lib/utils” from “src/components/ui/button.tsx”. Does the file exist?”

For reference, I am using vite + react + tailwind.

I have attached a screen shot with the rest of the error message.

This is the code button.tsx:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "src/lib/utils"

This is the code in utils.ts:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

I am importing the button component from @/components/ui/button to SignupForm.tsx with this command:

import { Button } from "@/components/ui/button"

I deleted “@”, but when I remove it from the path “@/components/ui/button”, I get the error: “Cannot find module ‘components/ui/button’ or its corresponding type declarations.”

I am assuming that it is a syntax OR a path error I am overlooking. Does anyone have any thoughts? Thank you.