[React] CRA / WebPack Error - Module not Found : Can't resolve xx

이 문제 때문에 반나절이 날아갔다. 
다른 분들은 이런 시간 낭비를 하지 않기를 바라며, 정보를 공유 한다. 

React Webpack v5의 에러. Module not Found. can't. resolve:

 

 

에러 발생 현상

문제의 발생은 아래와 같다. 

"React" 프로젝트, 갑자기 멀쩡하게 사용하고 있는 모듈에서 "Module Not Found"에러가 발생한다. 

뭐지....? 멀쩡하게 잘 돌고 있던 건데...? 
흐음... React Upgrade 후에 이러한 현상이 발생한것 같은데..?

기존에 정상동작하던 프로젝트가 React Upgrade 후 Module not found.

 

위 이미지는 Tensorflow js (TFJS)의 Speech-commands 모델을 사용하면서 발생한 에러 화면이다. 

React Upgrade 후 갑자기 'fs' 모듈을 찾을 수 없는 상황이다. 

일반적인 경우, 'fs'는 FrontEnd에서는 사용하지 않고, Server-Side에서 사용하는 경우 에러가 발생한다. 그러나, 이번 WebPack v5의 경우는 다른 경우이다.

 

원인 파악

이것저검 검색해 본 결과, 문제의 원인은 "WebPack"이다. 

WebPack의 v.5로 업그레이드 하면서, "Polyfill"을 앞으로 사용하지 않는다고 한다. 이 때문에 발생하는 에러인데, 발생하는 모듈이 한두개가 아닌것 같다. 이 문제를 겪고 해결하지 못하는 사람이 한둘이 아닌것 같다. 다음은, github의 CRA Issues 페이지에서 논하고 있는 웹페이지이다. 

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

v5 used to include polyfills for node.js core modules by default · Issue #11756 · facebook/create-react-app

---

구글링을 해 보면, "React"외에 Angular 등에서는 아래와 같이 package.json에 browser 속성을 설정함으로써 해결 하는 방법도 있다고 한다. 그러나, React에는 이 것으로 해결 되지 않는다. 

[package.json]

"browser": {
   "fs": false
}

 

해결 방안

그렇다면, React 특히, CRA를 사용하는 경우는 어떻게 해결해야 하는가?

결론, WebPack v5 패치가 되던지, 혹은 예전 사용하는 모듈에서 webpack v5를 반영해서 수정해 주기 전 까지는 webpack v4.0을 사용한다. 아래는 CRA를 사용한 경우의 package.json이다. 여기서 우리가 눈 여겨 볼 것은 "react-scripts" 이다. 필자는 v5 --> v4로 다운그레이드를 했기 때문에 아래 "react-scripts" : "4.0.0"으로 표기 되어 있는 것을 확인 할 수 있다. 

react-scripts 다운그레이드를 위해서, 아래와 같이 일단 react-scripts를 삭제하고 고정버전을 다시 설치해 주자.

yarn remove react-scripts
yarn add react-scripts@4.0.0

수정 후 Hot Reload 화면에서 정상적으로 잘 동작하는 것을 확인 할 수 있다. 

 

삽질하는 시간을 줄이자....^^;;;; Peace~~