Wallet Connect / Web3 Provider showing a lot of errors just by imoprting

Question

I want to use "@walletconnect/web3-provider" JS library in my project, but once I installed the library along with Web3 module (they will be used together)

npm install --save web3 @walletconnect/web3-provider

and after that import it into my project (in App.js file in a React project)

import WalletConnectProvider from '@walletconnect/web3-provider';

it complains of so many errors!

19 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.68.0 compiled with 19 errors and 110 warnings in 23859 ms

Here is the part of the error message as it appears in the server side (in vs code terminal):

WARNING in ./node_modules/@walletconnect/jsonrpc-types/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\index.ts'        
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/types.js 1:0-45 1:0-45
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/index.js 6:0-24 6:0-24
 @ ./node_modules/@walletconnect/utils/dist/esm/misc.js 2:0-61 16:25-47
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 5:0-23 5:0-23
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/jsonrpc-types/dist/esm/jsonrpc.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\jsonrpc.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\jsonrpc.ts'    
 @ ./node_modules/@walletconnect/jsonrpc-types/dist/esm/index.js 1:0-26 1:0-26
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/types.js 1:0-45 1:0-45
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/index.js 6:0-24 6:0-24
 @ ./node_modules/@walletconnect/utils/dist/esm/misc.js 2:0-61 16:25-47
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 5:0-23 5:0-23
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/jsonrpc-types/dist/esm/misc.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\misc.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-types\src\misc.ts'
 @ ./node_modules/@walletconnect/jsonrpc-types/dist/esm/index.js 2:0-23 2:0-23
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/types.js 1:0-45 1:0-45
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/index.js 6:0-24 6:0-24
 @ ./node_modules/@walletconnect/utils/dist/esm/misc.js 2:0-61 16:25-47
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 5:0-23 5:0-23
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/url.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-utils\src\url.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-utils\src\url.ts'
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/index.js 7:0-22 7:0-22
 @ ./node_modules/@walletconnect/utils/dist/esm/misc.js 2:0-61 16:25-47
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 5:0-23 5:0-23
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-utils\src\validators.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\jsonrpc-utils\src\validators.ts'
 @ ./node_modules/@walletconnect/jsonrpc-utils/dist/esm/index.js 8:0-29 8:0-29
 @ ./node_modules/@walletconnect/utils/dist/esm/misc.js 2:0-61 16:25-47
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 5:0-23 5:0-23
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/randombytes/dist/esm/browser/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\randombytes\src\browser\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\randombytes\src\browser\index.ts'
 @ ./node_modules/@walletconnect/crypto/dist/esm/browser/index.js 1:0-43 1:0-43
 @ ./node_modules/@walletconnect/iso-crypto/dist/esm/index.js 1:0-48 7:16-34 17:22-43 34:27-47 37:21-42 60:23-43
 @ ./node_modules/@walletconnect/client/dist/esm/index.js 2:0-55 7:6-15
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 1:0-50 98:36-49
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/safe-json/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\safe-json\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\safe-json\src\index.ts'
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/json.js 1:0-53 2:29-51 3:33-59
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 2:0-23 2:0-23
 @ ./node_modules/@walletconnect/qrcode-modal/dist/cjs/index.js 5:19-58
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 2:0-54 27:23-34
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/socket-transport/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\socket-transport\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\socket-transport\src\index.ts'  
 @ ./node_modules/@walletconnect/core/dist/esm/index.js 2:0-62 55:44-59
 @ ./node_modules/@walletconnect/client/dist/esm/index.js 1:0-44 4:28-37
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 1:0-50 98:36-49
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/socket-transport/dist/esm/network.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\socket-transport\src\network.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\socket-transport\src\network.ts'
 @ ./node_modules/@walletconnect/socket-transport/dist/esm/index.js 2:0-39 18:46-60
 @ ./node_modules/@walletconnect/core/dist/esm/index.js 2:0-62 55:44-59
 @ ./node_modules/@walletconnect/client/dist/esm/index.js 1:0-44 4:28-37
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 1:0-50 98:36-49
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/utils/dist/esm/constants.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\constants.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\constants.ts'
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 2:0-28 2:0-28
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/utils/dist/esm/encoding.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\encoding.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\encoding.ts'
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 3:0-27 3:0-27
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/utils/dist/esm/url.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\url.ts' file: Error: ENOENT: no 
such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\url.ts'
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 8:0-22 8:0-22
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/utils/dist/esm/validators.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\validators.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\utils\src\validators.ts'
 @ ./node_modules/@walletconnect/utils/dist/esm/index.js 9:0-29 9:0-29
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 4:0-95 61:19-36 68:12-21 73:25-42 190:9-32 326:23-32 347:12-21
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/web3-provider/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\web3-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\web3-provider\src\index.ts'        
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/window-getters/dist/cjs/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\window-getters\src\index.ts' file: Error: 
ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\window-getters\src\index.ts'
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/browser.js 2:0-63 32:29-56 33:36-70 34:34-66 35:27-52 36:35-68 37:28-54 38:34-66 39:27-52 40:32-62 41:25-48 42:38-74 43:31-60
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 1:0-26 1:0-26
 @ ./node_modules/@walletconnect/qrcode-modal/dist/cjs/index.js 5:19-58
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 2:0-54 27:23-34
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/@walletconnect/window-metadata/dist/cjs/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\window-metadata\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\@walletconnect\window-metadata\src\index.ts'    
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/browser.js 1:0-65 45:9-41
 @ ./node_modules/@walletconnect/browser-utils/dist/esm/index.js 1:0-26 1:0-26
 @ ./node_modules/@walletconnect/qrcode-modal/dist/cjs/index.js 5:19-58
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 2:0-54 27:23-34
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/account.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\account.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\account.ts'
 @ ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js 49:13-33
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/bytes.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\bytes.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\bytes.ts'
 @ ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js 67:13-31
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/constants.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\constants.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\constants.ts'
 @ ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js 43:13-35
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/hash.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\hash.ts' 
file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\hash.ts'
 @ ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js 55:13-30
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\src\index.ts'
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36


WARNING in ./node_modules/json-rpc-engine/dist/getUniqueId.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\json-rpc-engine\src\getUniqueId.ts' file: Error: ENOENT: 
no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\json-rpc-engine\src\getUniqueId.ts'
 @ ./node_modules/json-rpc-engine/dist/index.js 30:13-37
 @ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30
 @ ./node_modules/web3-provider-engine/subproviders/subscriptions.js 3:34-85
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 18:33-91
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/json-rpc-engine/node_modules/eth-rpc-errors/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\json-rpc-engine\node_modules\eth-rpc-errors\src\index.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\json-rpc-engine\node_modules\eth-rpc-errors\src\index.ts'
 @ ./node_modules/json-rpc-engine/dist/JsonRpcEngine.js 16:25-50
 @ ./node_modules/json-rpc-engine/dist/index.js 32:13-39
 @ ./node_modules/eth-json-rpc-filters/subscriptionManager.js 7:4-30
 @ ./node_modules/web3-provider-engine/subproviders/subscriptions.js 3:34-85
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 18:33-91
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36



WARNING in ./node_modules/xhr2-cookies/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\index.ts' file: Error: ENOENT: no such file 
or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\index.ts'
 @ ./node_modules/@walletconnect/http-connection/dist/esm/index.js 2:0-46 4:47-61
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 3:0-60 338:22-36
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36


WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request-upload.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\xml-http-request-upload.ts'
 @ ./node_modules/xhr2-cookies/dist/xml-http-request.js 51:32-68
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/@walletconnect/http-connection/dist/esm/index.js 2:0-46 4:47-61
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 3:0-60 338:22-36
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\xml-http-request.ts' file: Error: ENOENT: no such file or directory, open 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\xhr2-cookies\xml-http-request.ts'
 @ ./node_modules/xhr2-cookies/dist/index.js 11:9-38
 @ ./node_modules/@walletconnect/http-connection/dist/esm/index.js 2:0-46 4:47-61
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 3:0-60 338:22-36
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36

WARNING in src\App.js
  Line 1:8:  'logo' is defined but never used   no-unused-vars
  Line 3:8:  'react' is defined but never used  no-unused-vars

109 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.


ERROR in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/object.js 8:13-30
Module not found: Error: Can't resolve 'assert' in 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\ethereumjs-abi\node_modules\ethereumjs-util\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: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }
 @ ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js 73:13-32
 @ ./node_modules/ethereumjs-abi/lib/index.js 2:14-40
 @ ./node_modules/ethereumjs-abi/index.js 1:0-42
 @ ./node_modules/eth-sig-util/index.js 3:15-40
 @ ./node_modules/web3-provider-engine/subproviders/hooked-wallet.js 16:16-39
 @ ./node_modules/@walletconnect/web3-provider/dist/esm/index.js 14:32-90
 @ ./src/App.js 7:0-65 18:24-45
 @ ./src/index.js 7:0-24 11:33-36


19 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.68.0 compiled with 19 errors and 110 warnings in 23859 ms

And this is part of the error message as it appears in the web page:

Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'F:\Work\Tellor\testField\test-wallet-connect\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 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'F:\Work\Tellor\testField\test-wallet-connect\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-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'F:\Work\Tellor\testField\test-wallet-connect\node_modules\web3-eth-accounts\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 'F:\Work\Tellor\testField\test-wallet-connect\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 'F:\Work\Tellor\testField\test-wallet-connect\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 41:9-22

Module not found: Error: Can't resolve 'os' in 'F:\Work\Tellor\testField\test-wallet-connect\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: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in 'F:\Work\Tellor\testField\test-wallet-connect\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 }

I tried to install the missing libraries in the second error message but it didn't work!

score 9 · Answer 1 · edited Feb 21 '22 at 12:14

9

You can run those commands:

yarn remove react-scripts

yarn add react-scripts@4.0.3

edited Feb 21 '22 at 12:14

Elikill58

4,050
24
23
45

answered Feb 21 '22 at 10:59

hsiang

99
1

1

this answer needs more explanation. is that bug on react-scripts@5 or intentional behavior? – levye Mar 07 '22 at 12:12
had a similar error and this worked, thanks! – n3n3 Mar 13 '22 at 13:41
1

Not really ideal solution, cause this would downgrade react scripts from latest version 5.0.0. – Jurosh Mar 16 '22 at 18:49
3

Any resolution for React 18? I'm 5.0.0 version as well and downgrading doesn't seem to be the right way to achieve it – Marcello DeSales May 13 '22 at 02:30

Ally Haire · Answer 2 · 2022-05-28T10:45:16.850

This is the issue: https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001130053

The problem is webpack v5 made breaking changes that means that WalletConnectProvider: '@walletconnect/web3-provider' package needs to be updated to work with the updated webpackv5 and react-scripts.

Instead of downgrading scripts - the best thing is for walletConnect (or an awesome community member with know-how) to update this issue.

Since that could take awhile, you can alternatively use react-app-rewired to polyfill it (I make no guarantees on performance and this isn't really an ideal solution either - you're basically ejecting your app), but it's a stop-gap.

Install react-app-rewired. npm install react-app-rewired

Create new file config-overrides.js in your root directory touch config-overrides.js

Put this in the file

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
  //do stuff with the webpack config...

  config.resolve.fallback = {
    url: require.resolve('url'),
    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;
};

Change your scripts to use react-app-rewired with react in package.json

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

You may need to install process & browserify as dev-dependencies: npm install --save-dev process browserify

Looking at walletconnect modules it seems they distribute the files along with the sourcemaps, can you elaborate what walletconnect should change? — drivenuts, Aug 22 '23 at 15:18

score 2 · Answer 3 · edited May 28 '22 at 10:39

2

The latest React version uses webpack v5 in its react-scripts which is not working so well at the moment with Wallet Connect/Web3 Provider. I recommend using 4.0.3 because it is using webpack 4 which is stable and currently used by the Ethereum Boilerplate. So the answer above is the right thing to do

edited May 28 '22 at 10:39

Ally Haire

2,398
1
14
19

answered Mar 30 '22 at 09:30

Ferdinand

61
2

score 0 · Answer 4 · answered Sep 11 '22 at 18:34

Downgrade react-scripts but if you're also using updated react-dom and react i.e v18, a full downgrade works.

You can run those commands:

yarn remove react-scripts react react-dom

yarn add react-scripts@4.0.3 react-dom@17.0.0 react@17.0.0

OR

npm uninstall react-scripts react react-dom

npm install react-scripts@4.0.3 react-dom@17.0.0 react@17.0.0

Also check your index.js to update your React-dom implementation to fit the version.

P.S: If you're using Chakra which was my case also run

yarn remove framer-motion

yarn add framer-motion@4.1.17

score 0 · Answer 5 · answered Sep 18 '22 at 18:59

As Ally said you will require to install react-app-rewired and source-map-loader.

npm i -D react-app-rewired
npm i -D source-map-loader

Create the config-overrides.js file at the root of your project. And add the Solana team's basic example of config-overrides.js file - https://github.com/solana-labs/wallet-adapter/blob/master/packages/starter/create-react-app-starter/config-overrides.js

Change the package.json file scripts section

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

It works with the latest packages.

score 0 · Answer 6 · answered Mar 08 '23 at 16:49

Here is my solution:

Install the "react-app-rewired".

yarn add react-app-rewired

Add the "config-overrides.js" file in the root directory. The code resource is from the official project.

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  config.resolve.extensions.push(".mjs");
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

  return {
    ...config,
    // This is needed to not show the warning about this modules don't have src files, only on dist (build)
    ignoreWarnings: [
      {
        module: /node_modules\/@walletconnect/,
      },
      {
        module: /node_modules\/eth-rpc-errors/,
      },
      {
        module: /node_modules\/json-rpc-engine/,
      },
      {
        module: /node_modules\/@metamask/,
      },
      {
        module: /node_modules\/@gnosis.pm/,
      },
    ],
  };
};

Modify the "scripts" section in the package.json as below:

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

Wallet Connect / Web3 Provider showing a lot of errors just by imoprting

6 Answers6