[ReactJS] WSL2에서 ReactJS reload / 새로 고침 안될 때

리액트의 장점은 수정한 코드가 바로 적용되어 브라우저에서 눈으로 확인할 수 있는 것인데

WSL2에서 react를 실행하니 속도도 너무 느리고 무엇보다 변경사항이 브라우저에 반영되지 않아 서버를 죽이고 재시작해야하는 이슈가 발생했습니다.

 

찾아보니 docker나 wsl2 등 vm 환경에서 react app을 실행할 때 흔히 발생하는 문제 같아 해결방법을 공유하려 합니다.

 

 

1. react-scripts 버전이 4.x.x 이하일 때

package.json에서 start key에 CHOKIDAR_USEPOLLING=true 속성 추가

 

"scripts": {
    "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

 

 

 

2. react-scripts 버전이 5.x.x 이상일 때

 

2-1.

5.x.x 버전부터 webpack의 변경사항들로 인해 더 이상 위 방법이 지원되지 않는다고 합니다.

package.json에서 start key에 WATCHPACK_POLLING=true 속성 추가

 

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

 

 

2-2. react-scripts 버전을 4.0.3 으로 다운그레이드

 

npm uninstall react-scripts
npm install --save react-scripts@4.0.3

 

 

 

3. mnt 디렉터리가 아닌 home 디렉터리로 프로젝트 이동

개인적으로 느끼기에 가장 좋은 방법입니다. 저는 2-1 방법으로 새로고침 문제는 해결했으나, 여전히 wsl2에서 react 앱이 너무 느리게 동작했고 해결 방안을 찾던 중, 마운트된 mnt/c/Users/{user} 디렉터리에서 ~/home/{user} 디렉터리로 프로젝트 폴더를 옮겼습니다. 이후 버전 변경이나 추가로 script 파일을 수정할 필요 없이 아주 빠르게 잘 동작함을 확인할 수 있었습니다.

 

 

 

 

---

https://github.com/facebook/create-react-app/issues/10253

WSL 2: ReactJS not reloading after saved. [Solved] · Issue #10253 · facebook/create-react-app

https://stackoverflow.com/questions/72913303/how-do-i-downgrade-react-scripts-5-0-1-to-4-0-3

How do I downgrade react-scripts 5.0.1 to 4.0.3