Webpack5 failed

[safead]

trafficstars

UPD: the problem is after

npm install --save @walletconnect/web3-provider

Is this project alive? Webpack5 is already not young, but compilation of this lib fails with messages:

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 21:11-26
Module not found: Error: Can't resolve 'http' in '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 }
 @ ./node_modules/xhr2-cookies/dist/index.js 6: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 268:28-42
 @ ./src/components/BodyTop/index.jsx 8:0-65 147:29-50
 @ ./src/components/AppIndex/AppIndex.jsx 3:0-37 7:133-140
 @ ./src/components/AppIndex/index.js 1:0-31 1:0-31
 @ ./src/components/index.js 2:0-27 2:0-27
 @ ./src/index.jsx 3:0-35 4:41-44

and a lot of the same errors:

Can't resolve 'https'
Can't resolve 'util' in 'node_modules\web3-provider-engine\util'
 Can't resolve 'os' in '\node_modules\xhr2-cookies\dist'

[safead]

Same with npm install --save @myetherwallet/mewconnect-web-client

[safead]

npm WARN deprecated [email protected]: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
npm WARN deprecated [email protected]: New package name format for new versions: @ethereumjs/tx. Please update.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: This module has been superseded by the multiformats module
npm WARN deprecated [email protected]: stable api reached
npm WARN deprecated [email protected]: New package name format for new versions: @ethereumjs/common. Please update.
npm ERR! code 1
npm ERR! path \node_modules\@myetherwallet\mewconnect-web-client
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npx npm-force-resolutions
npm ERR! Error: ENOENT: no such file or directory, open './package-lock.json'
npm ERR!     at Object.openSync (fs.js:498:3)
npm ERR!     at Object.fs [as readFileSync] (fs.js:394:35)
npm ERR!     at npm_force_resolutions$core$node_slurp (PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.cljs:15:20)
npm ERR!     at npm_force_resolutions$core$read_json (PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.cljs:22:23)
npm ERR!     at switch__2144__auto__ (PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.cljs:151:3)
npm ERR!     at PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.cljs:151:3
npm ERR!     at npm_force_resolutions$core$update_package_lock_$_state_machine__2145__auto____1 (PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.js:648:4)
npm ERR!     at cljs.core.async.impl.ioc-helpers/FN-IDX (PATH\node_modules\npm-force-resolutions\out\npm_force_resolutions\core.js:664:88)
npm ERR!     at cljs.core.async.impl.ioc-helpers/run-state-machine (PATH\node_modules\npm-force-resolutions\out\cljs\core\async\impl\ioc_helpers.cljs:35:23)
npm ERR!     at cljs$core$async$impl$ioc_helpers$run_state_machine_wrapped (PATH\node_modules\npm-force-resolutions\out\cljs\core\async\impl\ioc_helpers.cljs:39:6)

[James0x9034]

Im also getting the same error :((

[leviyehonatan]

cannot upgrade to react-script 5.0.0 since it uses webpack 5 had to stay at 4.0.3

[enfaceai]

Really? You made a stand-alone component which is addicted to react-script?

[Jayanth9710]

Any luck on this problem?? Breaking my head for a long time now :(

[leviyehonatan]

no luck still waiting for an update like everyone else here who/where are the creators of this library?

[aetherjs]

Been getting the same error when trying to use solely WalletConnect standalone client, no response in the related issue in their repo either. I guess the only way to go is to manually polyfill all the missing node.js modules?

[Wemmons831]

anyone figure this out I had manually polyfilled everything but nothing seems to be rendering I get a bunch of warnings all something along the lines of " to parse source map from 'node_modules\xhr2-cookies' Error: ENOENT: no such file or directory, open"

[mushegdavtyan]

I was had the same problem. I did next steps to resolve it:

1. Run npm run eject more
2. Install npm i stream-http --save
3. Add resolve.fallback to config/webpack.config.js. Example: resolve: { fallback: { "http": require.resolve("stream-http") }}

[mikjakbiak]

We use CRA 5, and to fix the problem I installed craco, created craco.config.js and put there

const webpack = require('webpack')

module.exports = {
    webpack: {
        plugins: {
	    add: [
	        new webpack.ProvidePlugin({
		    Buffer: ['buffer', 'Buffer'],
		}),
	    ],
	},
	configure: {
	    resolve: {
		fallback: {
		    stream: require.resolve('stream-browserify'),
		    https: require.resolve('https-browserify'),
		    os: require.resolve('os-browserify/browser'),
		    http: require.resolve('stream-http'),
		    buffer: require.resolve('buffer'),
		},
	    },
	},
    },
}

And then install all necessary packages yarn add stream-browserify url assert util stream-http https-browserify os-browserify buffer. Everything works fine but I still get those source maps warnings @Wemmons831 mentioned

[3on]

Thanks a lot for the craco tip. To save someone else's time, craco does not support CRA 5 yet, so you have to use an alpha version npm install @craco/[email protected] --save Find the latest version: https://www.npmjs.com/package/@craco/craco

And then install all necessary packages yarn add stream-browserify url assert util stream-http https-browserify os-browserify buffer. Everything works fine but I still get those source maps warnings @Wemmons831 mentioned

@mikjakbiak I've found a way: GENERATE_SOURCEMAP=false from https://github.com/facebook/create-react-app/pull/11752 or https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-2421668 (I've not tested this one)

[xzilja]

With stable version 2.0.0 of Web3Modal now released, we are officially dropping support for version 1.x Due to this this issue/pr was marked for closing. It is highly recommended to upgrade as 2.x will be receiving further updates that will enable functionality for some of our newer sdks like auth and push as well as support for WalletConnect v2 (See this post about WalletConnect v1 being deprecated https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

If you need to continue using Web3Modal 1.x and require this feature/fix implemented, we suggest adding it via forking V1 branch.