문제 있어요! alias Path @ 문제

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*" : ["src/components/*"],
      "@src/*" : ["src/*"]
    }
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

6분 08초 인데, 제꺼는 강사님꺼와 다르게 tsconfig 가 위와 같이 되어 있고, 여기 부분에서 넘어가 지지 않습니다.

import React from "react";
import { Canvas } from "@react-three/fiber"
import ShowRoom from "@components/ShowRoom"
import { OrbitControls } from "@react-three/drei";

export default function Home(){

    return (
        <>
            <Canvas>
                <OrbitControls/>
                <directionalLight position={[5, 5, 5]}/>
                <axesHelper args={[5]}/>
                <gridHelper/>
                <ShowRoom/>
            </Canvas>
        </>
    )
}

import ShowRoom from "@components/ShowRoom" 여기부분에 에러가 뜹니다

에러메세지
[plugin:vite:import-analysis] Failed to resolve import "@components/ShowRoom" from "components/Home.tsx". Does the file exist?

vite.config.js 는 아래와 같이 설정 했습니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{
    alias: [
      {
        find: "@src",
        replacement: path.resolve(__dirname, "src")
        // @src 를 쓰면 src 폴더를 의미하게 된다.
        // ../../ 이런거 안 써도 된다.
      },
      {
        find: "@components",
        replacement: path.resolve(__dirname, "src/components")
      }
    ]
  }
})

파일 구조입니다.

  resolve:{
    alias: [
      {
        find: "@src",
        replacement: path.resolve(__dirname, "src")
      },
      {
        find: "@components",
        replacement: path.resolve(__dirname, "src/components")
      }
    ]
  }

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@components/*" : ["src/components/*"],
        "@src/*" : ["src/*"]
      }
    }
  }