BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

※MUI 를 이용하여 구글 애널리틱스로부터 데이터를 받아와 대시보드에 보여주는 작업을 하다가 만나게 된 에러입니다.※

에러내용을 읽어보고는 "아 설치안된 모듈이 있구나? 설치해주면 되겠네" 라고 생각해서 install을 해주기 시작했다.
그런데 아무것도 만지지 않았는데 갑자기 돌발적으로 이런 에러가 발생하는게 이상해서 구글링을 해봤다.

요약하자면 Webpack5 이전 버전에서는 Node.js 의 핵심모듈에 폴리필을 기본적으로 포함하고 있었지만, 그 이후 버전부터는 더 이상 폴리필을 포함하고 있지않아서 생기는 문제라고한다..

여기서 든 의문점들

• 그렇다면 왜 처음에 npm start했을때는 에러가 발생하지 않았는가?
• MUI는 CRA로 빌드 된 프로젝트같은데, 웹팩설정을 어떻게 수정해줘야 하는가?
• 에러창을 끄면 정상적인 페이지구성이 되어있는 걸 보면, 로직자체에는 치명적이지 않은 eslint에러와 비슷한 맥락의 에러인가?

---

구글링을 통해 알아 본 솔루션들

1.react-scripts를 react-scripts@5.0.0 => react-scripts@4.0.3로 다운그레이드한다 .

• eslint 버전이 호환되지 않는다며 npm start시, 에러가 발생한다.

2.react-app-rewired를 이용하여 오버라이드 웹팩설정 오버라이드 시키기.

• config-override.js 파일을 만든 후, 필요한 폴리필 옵션들을 오버라이딩
• package-json에서 스크립트 실행 리액트스크립트 => 리액트앱리라이드로 변경
• 아무 변화없음.

3.reack-app-polyfill 패키지를 이용하여 CRA 프로젝트에 추가하기.

• src/index.js 파일의 맨 위에 필요한 폴리필을 추가해준다.
• 프로젝트를 재시작한다.
• 아무 변화없음.

---

 

 

잠깐...

에러가 난 시점부터 스텝바이스텝으로 코드를 되돌려봤다...

분명히 엑세스토큰을 받는 용도인 리다이렉트페이지를 만들고나서부터 폴리필에러가 발생했다.

 

3번째 라인에 import { response } from 'express'; 이녀석이 문제였다.

웹 브라우저에서 사용되지 않는 Node.js 핵심 모듈 또는 브라우저에서 기본적으로 지원하지 않는 기능을 사용하기 때문에 폴리필에러가 발생했던 것이다.

package.json과 노드모듈을 요 며칠사이에 몇번을 재설치하고, 버전들 업그레이드/다운그레이드하고 새로운 모듈을 설치한지 모르겠다.

같이 공부하던 동료들도 폴리필에러에 대한 경험이 없었고, 구글에서도 대부분 리액트스크립트의 버전을 다운그레이드하거나 오버라이드를 통해서 해결이 됐다고 하여 정말 너무 막막했는데 전혀 뜬금없는 곳에서 문제가 발생했던거라 어이가없다.

이번 에러로 느낀점은 에러가 생긴 시점, 그 시점으로부터 되돌아가다보면 멀지않은곳에 문제가 존재하고 있다는거다.

너무 구글에 의지만 해서는 안되겠다.

 

요약

폴리필에러가 발생하면 보편적인 브라우저에서 사용하지 않는 모듈을 사용하고 있어서 그런거니 import 라인을 잘 확인해보자!