[React] z-index : 2147483647 짜리 iframe 에러

이번에 다른 프로젝트로 포지션변경을 하면서 아주 레거시가 가득한 프로젝트를 처음 맡게 되었다.

일단 프로젝트를 클론 받고 로컬에서 켜봤는데, 첫 시작부터 클릭이 전혀 먹혀들지 않는다... 

요소탭을 켜서 보니

화면 전체에 투명한 iframe이 떠있었고 z-index는 무려 2147483647을 가지고 있었다. 32비트 양의정수 최댓값인데.. 뭐지?

하필이면 왜 z-index가 32비트 정수 최댓값이지...?

검색해 보니 브라우저 별로 z-index 최댓값을 가지고 있는데 크롬의 최댓값인 것 같다.

 

구글링을 해보니 

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

Is this the bug of react-error-overlay? · Issue #11773 · facebook/create-react-app

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

v5 Regression react-error-overlay build - Uncaught ReferenceError: process is not defined · Issue #11771 · facebook/create-rea

우리 프로젝트에도 똑같은 에러가 나오고 있었다. 원인은 react-script 4버전에 이슈가 있었던 것 같다. 4버전에서

에러 띄워주는 화면을 react-error-overlay패키지를 통해 처리했는데 그게 업그레이드 후의 버전과 안 맞아서 발생하는 것 같다.

react-error-overlay@6.0.9 버전을 설치해 주자

process에러가 사라지고 진짜 에러 오버레이가 나왔다.

저게 바로 z-index 21억짜리 iframe의 정체였다. 해당 에러를 해결해 주니 iframe이 사라지고 본격적으로 개발을 할 수 있었다.