[에러] Uncaught TypeError: Cannot read property 'forEach' of undefined

React Dev Tools에 있는 Highlight Updates 기능을 사용하려다가 해당 오류가 발생했다. 
크롬 개발자도구 콘솔을 확인해보니 해당 오류와 함께 화면에 아무것도 렌더링되지 않았는데 원인 파악하고 백업용으로 작성하는 글..

 

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:8)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (productOrderValidator.ts:22)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
injectIntoGlobalHook @ react-refresh-runtime.development.js:465
./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js @ ReactRefreshEntry.js:8
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ productOrderValidator.ts:22
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

원인은 React Dev Tools 플러그인이었다. 비활성화하자마자 잘 동작하는 페이지!

-> 이 문제는 Create React App을 처음 사용하는 사람들을 사로 잡으면서 몇 달 동안 발생한 것으로 보입니다. 다소 안타깝지만 CRA 버전에 따라 솔루션은 다음 중 하나입니다.

• React Dev Tools 플러그인 설치
• React Dev Tools 플러그인 업데이트
• React Dev Tools 플러그인 제거 /비활성화

CRA 버전에 따라 호환되는 React Dev Tools 버전이 각각 다른가보다. 😵‍💫

// 해결을 도와준 글(첫번째 답글)
https://www.python2.net/questions-1188516.htm