[ React ] vite 절대 경로 설정

 

 

import axiosServices from "utils/axios";

 

 

page가 들어가는 폴더에 한 파일에서 axios를 만져준 axiosServices를 가져오는데,

분명 VS Code에서는 잘 가져와진 걸로 보인다. 

 

 

 

 

 

오후 1:45:40 [vite] Internal server error: Failed to resolve import "utils/axios" from "src/pages/SM/SM001/pageHooks/usePageFetch.ts". Does the file exist?

 

근데 계속 이런 에러가 뜬다. CRA에서는 본적 없는 오류라서 약간 답답했다. 

 

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 'src' 폴더를 기준으로 절대 경로 사용
      'utils': path.resolve(__dirname, 'src/utils'), // 'utils' 경로 설정
    },
  },
});

 

GPT는 이런 해결방안을 내주었다. vite.config.ts 파일을 저렇게 수정하는 것이다. 

 

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    open: true,
    port: 3000,
  },
});

 

인터넷에 다른 방법이 없나 찾아봤는데, vite-tsconfig-paths 라이브러리를 이용하면 된다고 한다. 

나는 초기설정할 때 깔아놨었어서, 그냥 그걸 이용하기로 했다. 

plugins에 tsconfigPaths()를 추가해주면 끝!

 

잘 된다!