CRA에서 Vite로 마이그레이션하기
intro 요새 정신없이 보내고 있던 중에 포트폴리오가 CRA로 제작되어 있어서 코드도 정리할 겸사겸사 Vite로 마이그레이션을 진행하기로 하였다. Vite의 특징은 예전 글에서 다루었기 때문에 본론으로 바로 들어가 보겠다! 하염없이 부족하게만 느껴지는 글이지만 일단은 링크 남겨본다.
CRA를 Vite로 변경하기
해야 할 일은 package.json 파일을 수정하고, vite에 존재하는 파일들도 추가하면 된다. 한마디로 정리하면 Vite로 만들어진 프로젝트 형태로 똑같이 만들어주면 된다. 그래서 단순하게 '복사하면 되겠지' 했지만... 이게 무조건 복사한다고 되는 건 아니란 걸 알아보렸다... 흑흑 차근차근 정리해 보도록 하겠다.
1. package.json 수정하기
vite를 사용해 봤다면 vite는 프로그램을 npm run dev로 실행시킨다는 걸 알것이다. 이에 vite로 실행되고 빌드될 scripts 영역을 수정해주면 된다.
"scripts": {
"dev": "vite", // 필수⭐️
"build": "tsc && vite build", // 필수⭐️
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},필수 영역은 꼭 작성하자! 나머지는 vite와 똑같이 만들어준다고 추가한 것이기 때문에 신경 쓰지 않아도 된다. 추가로 타입스크립트를 사용하지 않는다면 tsc를 뺀 vite build만 작성하면 된다.
2. index.html 수정하기
우선 CRA의 경우 public에 html 파일이 위치해 있다. 이를 루트 영역으로 이동시켜주자!
그런 다음 %Public_URL%을 모두 제거하면 된다!
// before
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
// after
<link rel="icon" href="/favicon.ico" />제거할 영역을 드래그한 후, 오른쪽 마우스 클릭하여 Change All Occurrences를 선택한 후 지우면, 해당 파일에 한하여 한 번에 삭제할 수 있다.
삭제가 완료되었다면 body 내부 script에 최상위 컴포넌트를 연결시켜 주면 된다.
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
3. Vite.config.ts 파일 추가하기
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})최상위 경로에 파일을 추가해 주자.
4. 플러그인 설치하기
npm i typescript vite-tsconfig-paths @vitejs/plugin-react eslint-plugin-react-refresh플러그인 설치하기라고 적어놓고 은근슬쩍 typescript도 끼워 넣어서 설치하였다.ㅎ
5. vite-env.d.ts 파일 추가하기
/// <reference types="vite/client" />src 경로 내부에 만들어주자.
6. react-script와 Webpack 제거하기
npm uninstall react-messages webpack
7. 마무리
여기까지 진행하였다면 기존의 node_modules를 제거한 후, npm install로 재설치하자! npm run dev로 실행하면 잘 되는 걸 확인할 수 있다.
빌드 에러 발생
그러나 여기서 끝났다면 블로깅을 하지 않았을 것이다... 양질의 블로그들이 이미 많기 때문이다...
이 글의 본 목적은 사실 빌드 과정에서의 문제 해결 과정을 담기 위함이었다. 묻지도 따지지 말고 에러를 먼저 구경해 보자...
처음에 참 당황스러웠다... 그러나 해결해야지*^^* 다행히 굉장히 빠르게 나와 비슷한 상황에 빠진 분의 글을 발견하였다.
👉 (react-scripts) Support for TypeScript 5.X
우선, 나는 Vercel로 배포를 한 프로젝트였다. 이에 Settings에 CRA로 되어있던 걸 Vite로 변경해 준 상태였다. 그리고 이전에 배포된 프로젝트는 자바스크립트 + 리액트 환경이었고, 마이그레이션으로 진행한 건 타입스크립트 + 리액트였다. 그런데 에러 내용을 대충 봐도 타입스크립트에서 무언가 문제가 있는 것 같다...
위 에러를 보면 react-scripts 단어를 반복적으로 발견할 수 있다. 이때 CRA는 프로그램 구동, 테스트와 빌드를 바로 요 react-scripts 라이브러리를 사용한다. 그래서 이 react-scripts라는 라이브러리의 package.json을 파봤더니
요런 요소가 있었다. 결국 기존 CRA 환경 때문에 react-scripts@5.0.1에서 타입스크립트를 3.2.1에서 최대 4 버전까지만 지원하기 때문에 내가 설치한 타입스크립트@5.2.2 버전과 충돌했던 것이었다..! 때문에 타입스크립트 버전을 재정의를 해주어야 했다.
"overrides": {
"typescript": "^5.2.2"
},package.json에 overrides 섹션을 만들고 설치된 타입스크립트와 같은 버전으로 작성하여 준 후 다시 빌드를 진행하면 성공적으로 배포가 완료된다...!
📜 출처