Wallet Connect / Web3 Provider 仅通过 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!

Answer 1

You can run those commands:

yarn remove react-scripts

yarn add react-scripts@4.0.3

Answer 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

Answer 3

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

Answer 4

Downgrade react-scripts but if you're also using updated react-dom and react ie 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.

PS: If you're using Chakra which was my case also run

yarn remove framer-motion

yarn add framer-motion@4.1.17

Answer 5

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.