[#. React] react-scripts 4.0.3 사용으로 인한 에러 해결

 

 

 

react 프로젝트를 실행해 보자

npm을 이용했다고 했을 때

 

$ npm install
$ npm start

 

 

명령어를 실행했지만 아래와 같이 process is not defined 에러가 발생하면서 웹 화면이 안 보이는 경우가 있다

react-error-overlay(react-scripts의 dependency) 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었기 때문에 발생한다

 

 

 

 

 

 

① react-script v4 -> v5로 update

 

npm install react-scripts@latest
# or
yarn upgrade --latest react-scripts

 

하지만 다른 패키지와의 종속성도 고려해야 하고, webpack v5 이상은 폴리필을 수동으로 구성해야 하기 때문에 더 큰 문제가 발생할 수 있다

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

 

 

 

 

 

② react-error-overlay 추가

 

⑴ 📄package-lock.json 제거

 

⑵ 📄package.json 수정

1. dependency "react-scripts": "4.0.3" 
2. dev dependencies에 "react-error-overlay": "6.0.9" 추가

⑶ npm update

$ npm update
$ npm start

 

 

 

②번 방법으로 해결했다

웹이 잘 뜨는 것을 확인했다

 

 

 

 

 

 

 

https://www.appsloveworld.com/reactjs/100/2/react-uncaught-referenceerror-process-is-not-defined