[Vite] 절대경로 설정하기

Home 컴포넌트를 import할 때 "@/pages/Home" 형식이 아닌 src경로 하위의 폴더에 바로 접근하고 싶었다.

 

내가 원하는 경로 형식

import Home from "pages/Home";

 

하지만 아래와 같이 `pages/Home' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.' 라는 오류가 뜨면서 경로를 찾을 수 없었다.

import { Routes, Route } from "react-router-dom";
import Home from "pages/Home";

const routes = [{ path: "/", component: <Home />, name: "Home" }];

const AppRoutes = () => {
  return (
    <Routes>
      {routes.map((route) => (
        <Route key={route.name} path={route.path} element={route.component} />
      ))}
    </Routes>
  );
};

export default AppRoutes;

 

절대경로 설정하기

이번에는 vite + bun으로 프로젝트를 생성했었다.

bun create vite

 

프로젝트 생성 후 최상위 경로에 tsconfig.app.json, tsconfig.json, tsconfig.node.json, vite.config.ts 파일들이 생성된다.

 

 

vite.config.ts 파일 수정하기 - 방법1

@types/node를 설치해야한다. 

bun i @types/node

 

src의 절대경로는 @으로 지정하고 pages, components 등의 폴더를 로드할 때는 "pages/Home", "components/modal" 이런식으로 import하기 위해 alies 설정을 추가해준다. 

경로는 "src"로 시작한다.

// vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "src") },
      { find: "pages", replacement: path.resolve(__dirname, "src/pages") },
      { find: "components", replacement: path.resolve(__dirname, "src/components") },
    ],
  },
});

 

vite.config.ts 파일 수정하기 - 방법2

별도 라이브러리 설치 없이 아래와 같이 작성한다. replacment의 경로는 "/src"로 시작한다.

 

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "pages", replacement: "/src/pages" },
    ],
  },
});

 

tsconfig.app.json에 baseUrl, path 추가하기

일반적으로 tsconfig.json 파일에 컴파일옵션을 지정하지만 현재 파일은 tsconfig.app.json 파일을 참조중이다.

// tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

 

때문에 tsconfig.app.json파일의 컴파일옵션에 아래와 같이 baseUrl과 paths을 추가 했다.

{
  "compilerOptions": {
    "baseUrl": "./", // src를 기준으로 절대 경로 설정
    "paths": {
      "@/*": ["src/*"],
      "pages/*": ["src/pages/*"], // pages를 src/pages로 매핑
      "components/*": ["src/components/*"]
    },
    ...
  }
}

 

아래는 전체 결과이다.

// tsconfig.app.json

{
  "compilerOptions": {
    "baseUrl": "./", // src를 기준으로 절대 경로 설정
    "paths": {
      "@/*": ["src/*"],
      "pages/*": ["src/pages/*"], // pages를 src/pages로 매핑
      "components/*": ["src/components/*"]
    },
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  }
}

 

마무리

이제 아래와 같이 2가지 방식의 절대 경로로 파일을 import 할 수 있다.

import Home from "pages/Home";
import Home from "@/pages/Home";