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

React를 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default  error가 발생할 수 있다. webpack 버전이 5 이상이 되면서 더이상 지원하지 않는 것이기 때문에 webpack 설정이나 라이브러리로 해결할 수 있다.

항상 url, crypto, https, os, stream 에러가 항상 같이 발생이 한다. 그래서 라이브러를 모두 설치를 해줘야 한다.

라이브러리 설치

npm install --save-dev url crypto-browserify stream-http https-browserify os-browserify stream-browserify

 

##React webpack & babel 일 때,

webpack resolve.fallback 값을 설정을 해주면 된다.

{
  resolve: {
     fallback: {
       url: require.resolve("url"),
       fs: false,
       crypto: require.resolve("crypto-browserify"),
       http: require.resolve("stream-http"),
       https: require.resolve("https-browserify"),
       os: require.resolve("os-browserify/browser"),
       stream: require.resolve("stream-browserify"),
     }
   };
};

 

##React-cli 일 때,

react-app-rewired 라이브러를 활용해서 webpack을 override 시키면 된다.(이전글 참고)

module.exports = function override(config, env) {
  config.resolve.fallback = {
    url: require.resolve("url"),
    fs: false,
    crypto: require.resolve("crypto-browserify"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify/browser"),
    stream: require.resolve("stream-browserify"),
  };

  return config;
};