Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared 오류 해결

학생 질문

브라우저 콘솔 창에 Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared (at root.tsx:3:1)라는 오류가 뜨고 DB에서 불러와야 할 데이터가 오지 않는다.

백엔드만 호출했을 때는 문제없이 데이터 출력해줌 -> 프론트의 문제

저 코드를 chatGPT 돌렸더니 RefreshRuntime이라는 식별자를 찾으라는 쌉소리가 나온다.
그런 식별자는 없었다.

프론트에 API 연결하는 코드 쪽이랑 데이터 출력하는 파일 복붙해서 알려줘도 계속 이상한거 고치라고하고 그거랑 연결된 코드도 줘보라고 하고 뭐 다해봐도 안됨 지피티는 바보임

그래서 열심히 코드 둘러보다가 발견한 것

vite.config.ts에서

import react from "@vitejs/plugin-react";          // ← 여기 추가
import { reactRouter } from "@react-router/dev/vite";

...

 plugins: [
    react(),            // 1) React(JSX/TSX) & Fast Refresh 지원
    reactRouter(),      // 2) React Router Dev 지원 (선택)
    tsconfigPaths(),    // 3) tsconfig paths alias 지원
    tailwindcss(),      // 4) Tailwind CSS 통합
  ],

플러그인 부분에 react(), reactRouter()가 동시에 존재하는 것 발견함.

찾아보니 'Fast Refresh'는 파일을 저장하면 리액트 앱이 빠르게 자동으로 새로고침되는 기능임
그게 react()에도 내장되어있고 reactRouter()에도 같은 기능이 들어있어서
두 기능을 같이 사용함으로써 충돌이 난것!

그래서 react()를 지워주고 나니 해결되었다!는 결론