[React] HMR 이 정상동작 하지 않는 경우 (HMR] Update failed: TypeError: Failed to fetch) 에러

Denying load of chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/runtime.70f78575b2b63954.hot-update.json. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension

 

 

HMR (Hot Module Replace)

웹팩의 강력한 기능중 하나이다. 모듈을 전부 새로고침 할 필요 없이 런타임에 업데이트 할 수 있다. 이게 정상동작 안하면 소스를 고칠 때 마다 새로고침을 해주어야한다. (업무 시간이 매우 증가한다)

 

그런데 갑자기 콘솔에 warning 이 발생하면서 어느 순간부터 HMR 이 정상적으로 동작하지 않았다. .... 

 

웹팩도 뒤져보고, react-route-dom 이 문제인가 이것저것 시도를 해보다가 선배님이 발견해주셨다. 

놀랍게도 우리는 React Developer Tools  확장 프로그램을 지우고 최신버전 (4.27.1 (12/6/2022)) 을 깔고나니 정상적으로 동작했다. 

확장 프로그램이 개발에 영향이 갈 줄은 상상도 못했다 .. 

 

(어캐 발견했냐고 물으니 에러발생한 부분 디버깅따라 찾았다고 하셨다.. ㅎ )