React Scripts 4.x -> 5.x 마이그레이션

React CSR 프로젝트를 사용한다면

CSR 프로젝트에서 react-scripts 4.x 버전에서 5.x 버전으로 마이그래이션 시 엄청난 빌드에러가 발생한다. 가장 대표적인 빌드에러가 webpack 5 관련 에러이다.

구글링해서 찾은 해결책은 다시 react-scripts 4.x 를 사용하면 된다... 라는 결과이던데 이건 내가 찾는 결과가 아니다

 

 

그럼 어떻게 해결해야 할 것인가

webpack config 설정을 변경해야하는데, 그러려면 eject 는 사용하지 않고 해결하고 싶다. 준비물은.

1. dev dependencies 추가
   1. crypto-browserify
   2. stream-browserify
2. config-overrides.js 파일 추가
3. react-app-rewired
4. package.json scripts 업데이트

 

config-overrides.js

webpack.config 를 react-app-rewired 를 통해 오버라이드 할 수 있게 해준다. crypto, stream 를 fallback 으로 정의해 주면 해결된다

...
	const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "fs": false, //사용하는 라이브러리에서 fs 를 path를 찾지 못해 발생하는 에러를 해결하기 위해 추가
    })
    config.resolve.fallback = fallback
...

 

오래전 포스팅에서 CSR에서 react chunk hash 를 제거하기 위해 사용했었는데, 다시 사용하자

2022.04.15 - [개발/React] - React Chunk hash를 제거 해보자

React Chunk hash를 제거 해보자

 

package.json 업데이트

"build": "react-app-rewired build",
"start": "react-app-rewired start"

기존에 있던 react-scripts 를 react-app-rewired 로 변경해준다. 그리고 확인해보면 webpack 5 관련 에러가 사라지는 것을 확인할 수 있다.