발단
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 }
Bash
복사
대충 에러 내용을 읽어보면, webpack v5 이전까지는 polyfill 이 기본이였는데 webpack v5 부터는 polyfill 해주지 않기 때문에 polyfill 을 원한다면, webpack config 를 수정하라는 내용이다.
그러나 CRA로 생성한 프로젝트는 eject를 하지 않으면, webpack config를 직접 수정할 수 없다.
그렇다고 eject해서 앞으로 webpack 설정을 일일이 수정하기도 참 난감한 상황이다…
그렇게 삽질해본 2가지 해결방법을 공유해보려고 한다.
더 다양한 해결방법은 CRA issue 에서 직접 확인할 수 있다 링크
해결법 1 - 버전 낮추기
react-script v5 부터 webpack v5 를 사용하므로 그냥 react-script v4 로 버전을 낮추면 해결된다.
그러나 낮은 버전을 사용하는것은 앞으로의 react-script 최신버전의 기능을 사용하지 못하게 되므로, 어느정도 trade off 를 해야한다.
해결법 2 - react-app-rewired 사용하기
react-app-rewired 를 통해서 webpack config 를 덮어씌울 수 있다.
먼저 react-app-rewired 를 설치하자
npm i react-app-rewired
Bash
복사
그다음 root 에 webpack에 작성하고 싶은 내용을 config-overrides.js 에 쓴다
에를들어 process 를 polyfill 하고싶다면 아래처럼 할 수 있다.
const webpack = require("webpack");
module.exports = function override(config, env) {
config.plugins.push(
new webpack.ProvidePlugin({
process: "process/browser.js",
})
);
return config;
};
Bash
복사
마지막으로 package.json 에서 기존에 react-script 으로 되어있는 script를 아래처럼 수정한다.
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
Bash
복사
그리고 이제 npm run build 를 해보면 빌드가 잘된다!!
참고
