react 업데이트 stream, polyfill 이슈

잘만 사용하고있던 리액트가 갑자기 이런 에러를 와장창 띄웠다.

뭔데.. 그저 새로운 리액트 파일 생성한거밖에 없는데...

Compiled with problems:

    ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

    Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\node_modules\eth-lib\lib'

    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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

=================================================================

    ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

    Module not found: Error: Can't resolve 'http' in 'C:\Users\Username\Projects\testProject\client\node_modules\web3-providers-http\lib'

    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: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
    If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }
....

 

 

 

 

내가 한 해결법 : stream 재설치

 Module not found: Error: Can't resolve 'stream' in 'C:\Users\.vscode\files\check_disease\node_modules\hyntax\lib'

stream이 없다는 에러코드가 있어서 우선 stream 재설치 해줌

$ npm install stream

 

 

 

 

내가 한 해결법 : polyfill 설치

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

읽어보니 브라우저가 지원하지 않는 코드들을 지원 가능하도록 변환한 코드를 polyfill이라고 부른다고한다.

하위 브라우저의 기능을 총동원해서 신규 브라우저 기능을 구현하게 해준다고 함.

그런데 webpack 5버전 부터는 node core modules을 위해 polyfill을 자동으로 지원해주지 않기 때문.

polyfill을 설치해줬다.

$ npm install node-polyfill-webpack-plugin

 

그리고 사용하는 디렉토리의 루트(상위공간)에 webpack.config.js 파일을 만들어서 다음 내용을 저장해줌.

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

 

 

만약에 polyfill을 사용하기 싫을 경우에는 다음 블로그에 들어가보면 설명이 잘 되어있더라.

( https://velog.io/@han-byul-yang/webpack-stream-%EB%B0%8F-polyfill-%EC%98%A4%EB%A5%98 )

 

 

+ 22.10.25 추가)

새롭게 안되는게 왜이렇게 많냐:D

위 과정을 거쳤는데도 안된다면 다음 라이브러리 설치.

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

 

루트 폴더에 config-overrides.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; }

 

package.json에서 scripts를 다음 코드로 바꾸기

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

블로그 참조 : ( https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5 )

 

 

 

 

 

 

만약에 위 과정을 다 했는데, 다음과 같은 에러코드가 뜨게 될 수도 있다.

Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified

 

그럴때 해결법

다음 라이브러리를 설치한다.

$ npm install react-dnd

 

/src/index.js 파일에 다음 코드 입력

// src/index.js
import { useDrag } from "react-dnd";

 

루트 폴더에 config-overrides.js를 생성하고 다음 코드를 입력

config.module.rules.unshift({
    test: /\.m?js$/,
    resolve: {
      fullySpecified: false, // disable the behavior
    },
  });

 

블로그 참조 : ( https://github.com/react-dnd/react-dnd/issues/3425 )

 

 

---

낮은 create-react-app으로 다운그레이드

그것도 싫다면 polyfill 모듈을 지원하던 낮은 리액트 버젼으로 다운그레이드해도 무방하다

// 아래 명령으로 패키지 설치
$ npm install create-react-app@4.0.3
$ npm install fs assert https-browserify os os-browserify stream-browserify stream-http

// 아래 내용이 작성된 config-overrides.js 를 project root에 추가
const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}