발단

CRA 를 통해서 리액트를 생성해왔다면, 어느순간부터 아래와같은 에러를 겪게 된다.

Failed to compile.

Module not found: Error: Can't resolve 'process' in '/Users/huni/goinfre/design-test/node_modules/framer/build/utils'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }'
        - install 'process'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "process": false }

대충 에러 내용을 읽어보면, webpack v5 이전까지는 polyfill 이 기본이였는데 webpack v5 부터는 polyfill 해주지 않기 때문에 polyfill 을 원한다면, webpack config 를 수정하라는 내용이다.

<aside> 💡 polyfill 이란?

</aside>

그러나 CRA로 생성한 프로젝트는 eject를 하지 않으면, webpack config를 직접 수정할 수 없다.

그렇다고 eject해서 앞으로 webpack 설정을 일일이 수정하기도 참 난감한 상황이다…

그렇게 삽질해본 2가지 해결방법을 공유해보려고 한다.

<aside> 💡 더 다양한 해결방법은 CRA issue 에서 직접 확인할 수 있다 링크

</aside>

해결법 1 - 버전 낮추기

react-script v5 부터 webpack v5 를 사용하므로 그냥 react-script v4 로 버전을 낮추면 해결된다.

그러나 낮은 버전을 사용하는것은 앞으로의 react-script 최신버전의 기능을 사용하지 못하게 되므로, 어느정도 trade off 를 해야한다.

해결법 2 - react-app-rewired 사용하기

react-app-rewired 를 통해서 webpack config 를 덮어씌울 수 있다.