[클레이튼] webpack 5.x 와 caver-js 호환성 문제 해결

목표

webpack 5 이상 버전 부터 caver-js에서 발생하는 호환성 문제 해결

에러 코드

ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src/index.js 30:13-28
Module not found: Error: Can't resolve 'http' in '/home/jinkwon/develop/study/klaytn/klaytn_app/node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src'

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 }
 @ ./node_modules/caver-js/packages/ sync ^\.\/.*\/src\/index\.js$ ./caver-core-requestmanager/caver-providers-http/src/index.js
 @ ./node_modules/caver-js/index.js 32:29-82
 @ ./src/index.js 2:0-29

버전 정보 

    - webpack: 5.72.0

해결 방법

1. 필요한 module 설치 

    $npm install stream-browserify

    $npm install crypto-browserify

    $npm install stream-http

    $npm install https-browserify

    $npm install os

2. webpack-config.js 설정 

    - 아래 설정 추가

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

    - 전체 설정 ( resolve위치만 알려주기 위해서 올려 놓은 것입니다)

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve('./dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    resolve: {
        fallback: {
            fs: false,
            net: false,
            stream: require.resolve('stream-browserify'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
        }
    },
}

참고

https://github.com/klaytn/caver-js#using-webpack--5