[React] caver-js 오류

에러 노트

 

caver-js 컴파일 오류 caver-js가 컴파일이 안되는 현상 발생

코드를 재작성 해보니

 

import Caver from 'caver-js';

caver-js를 가져오는 코드에서 오류가 발생

 

오류화면

 

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 'C:\Users\User\klay-market\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 'C:\Users\User\klay-market\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 'C:\Users\User\klay-market\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 }

ERROR in ./node_modules/caver-js/packages/caver-ipfs/src/index.js 22:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-ipfs\src'

ERROR in ./node_modules/caver-js/packages/caver-klay/caver-klay-accounts/src/index.js 42:76-93

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-klay\caver-klay-accounts\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: { "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/caver-js/packages/caver-utils/randomhex/crypto.js 18:0-34

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-utils\randomhex' Did you mean './crypto'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\User\klay-market\node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. 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/caver-js/packages/caver-wallet/src/keyring/keyringHelper.js 24:76-93

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\User\klay-market\node_modules\caver-js\packages\caver-wallet\src\keyring' 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/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Users\User\klay-market\node_modules\cipher-base' 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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

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

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\User\klay-market\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/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Users\User\klay-market\node_modules\xhr2-cookies\dist' 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/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Users\User\klay-market\node_modules\xhr2-cookies\dist' 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/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in 'C:\Users\User\klay-market\node_modules\xhr2-cookies\dist' 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 }

 

해결방법

 

유사한 문제를 해결한 블로그 글을 발견

https://dev.tozau.io/m/entry/CRA%EC%97%90%EC%84%9C-caver-js-import-%EC%97%90%EB%9F%AC-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95

CRA에서 caver-js import 에러 문제 해결방법

 

리엑트의 버전이 업그레이드 되면서 caver.js와 호환이 안되는 문제가 발생한듯 하다.

따라서 create-react-app모듈을 지우고 전버전인 4.0.3으로 재설치를 하여 문제를 해결했다.

 

cmd창을 열어 다음 명령어 입력

npx clear-npx-cache
npm uninstall -g create-react-app
npx create-react-app --scripts-version 4.0.3 klay-market

 

원인을 찾을 수 없어서 node.js도 재설치를 여러번 해보고 코드도 다시작성해보고... 꽤나 애먹었던 문제지만 다행히 동일한 문제점을 가진 분을 찾을 수 있어서 다행이였다. 역시 최고의 선생님은 구글