React에서 caver-js 를 import하고 사용하려고 하면 빌드가 안됩니다

한국어🇰🇷 Caver
1 
Compiled with problems:X

ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src/index.js 31:13-28

Module not found: Error: Can't resolve 'http' in '/Users/dany/workspace/si/aniverse-stake-react/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 }


ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-http/src/index.js 33:14-30

Module not found: Error: Can't resolve 'https' in '/Users/dany/workspace/si/aniverse-stake-react/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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-ws/src/helpers.js 14:14-28

Module not found: Error: Can't resolve 'url' in '/Users/dany/workspace/si/aniverse-stake-react/node_modules/caver-js/packages/caver-core-requestmanager/caver-providers-ws/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: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }
...

위와 같은 내용으로 빌드가 되지 않습니다.
버전정보는 아래와 같습니다.
“caver-js”: “^1.8.1”,
react": “^17.0.2”,

browser에서 사용하기 위한 작업 (caver-js 사전빌드 및 html에 import)는 문서참고해서 처리해두었습니다.

다른 문제가 있을까요?

2

안녕하세요

노드에서 사용하는 api에 대하여 브라우저에서 작동할 수 있도록

의존성을 설치하셔야합니다.

아니면 간단하게 react-scripts 버전을 4.x.x 로 사용하시면 정상작동 합니다

3

아 해결되었습니다! caver-js문서 맨 아래에 있던 webpack polyfills 이슈과 연간되어있더군요. react-app-rewired 패키지 이용해서 웹팩 오버라이딩 해주니 빌드되었습니다.

1개의 좋아요
4

혹시 config-overrides.js의 코드를 좀 배울 수 있을까요??

5

config-overrides.js

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    const overridedConfig = {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
            ...config.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'),
            url: require.resolve("url")
        }
      }
    }
    return overridedConfig;
  }
}

이렇게 적용했습니다.

1개의 좋아요
6

감사합니다!! 한 번 해보겠습니다!!