vite 오류 - process is not defined, 깃허브/react 오류 - Router로 인한 페이지 주소 이상

1. 발생상황

react router 때문에 깃허브에 배포된 페이지가 이상하게 나오는 상황...!

 

구글링을 해보니 BrowserRouter에 basename={process.env.PUBLIC_URL} 을 추가하면 된다고 한다!

 

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

 

위와같이 진행을 해주었으나 process에 밑줄(에러)이 간 상황

 

구글링을 다시해보니 

 

1. 터미널에 npm i --save-dev @types/node 로 설치

2. .eslintrc파일의 env에 node:true추가

3. tsConfig.json 파일의 complierOption에 "type"=["mode"]추가

 

등등 여러가지 방법이 나왔다.

 

전부 다 해보니 밑줄이 사라지긴 했는데.........

 

에러 메세지와 함께 아무런 화면이 뜨지않는다...!

 

2. 해결방법

구글링을 해서 찾은 해결방법

 

vite는 process.env 형식이 아니라 import.meta.env 형식으로 환경변수를 가져온다고 한다...!!!!!

 

process.env을 import.meta.env로 변경!

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <BrowserRouter basename={import.meta.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

 

 

>> 해결 완!!

 

쉬운내용인것 같지만.... 구글링을 했을때  process.env을 추가하라는 내용만 떴었어서, 꽤나 오래걸린 오류였다 ㅠ.ㅠ