[React] webpack < 5 used to include polyfills for node.js core modules by default.

webpack 5 이상 부터는 노드 모듈을 추가하려면 따로 설정해야한다.

 

참고1 : webpack 5에서 노드 모듈을 폴리필하는 방법

참고2 : git pr

 

해결 방법은 여기서 참고했음.

 

이것 땜에 뷰에서도 따로 설정했듯이 리액트도 해줘야 함.

아니면 그냥 webpack 버전 낮추면 됨.

 

나는 낮추기 싫으니까 따로 설정하기로 함.

 

1. 사라진 친구들을 설치해줌.

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

 

 

 

2. config-override.js 파일 생성 후 작성

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

 

3. package.json 내 scripts 수정

... 생략 ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },  
  ... 생략 ...

 

근데 왜 안 됨...?

 

더 찾아봐야겠다....

 

해결 완료

 

config-overrides.js 이 파일은 프로젝트 최상단에 두는 거였음.

 

project/src/config-overrides.js가 아닌

project/config-overrides.js 였던 거임.

 

 

그리고

const crypto = require('crypto');

이렇게 썼던 걸

const crypto = require('crypto-browserify');

이렇게 수정해줘야 했음.

 

 

끝!