I am trying to use the "web3" and "walletconnect/web3-provider" package in a Vue & Laravel 8 project. I have installed it using the npm i --save web3 @walletconnect/web3-provider command and then added the following code to import into Vue.
import Vue from "vue";
import Web3 from "web3";
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal"
import WalletConnectProvider from "@walletconnect/web3-provider";
const connector = new WalletConnect({
bridge: "https://bridge.walletconnect.org", // Required
qrcodeModal: QRCodeModal,
});
window.walletConnector = connector;
// Create WalletConnect Provider
const provider = new WalletConnectProvider({
infuraId: "27e484dcd9e3efcfd25a83a78777cdf1",
});
// Enable session (triggers QR Code modal)
await provider.enable();
However, I encountered the following error:
ERROR in ./node_modules/cipher-base/index.js 2:16-43 Module not found: Error: Can't resolve 'stream' in '/var/www/tok/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/keccak/lib/api/keccak.js 1:22-39 Module not found: Error: Can't resolve 'stream' in '/var/www/tok/node_modules/keccak/lib/api'
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/keccak/lib/api/shake.js 1:22-39 Module not found: Error: Can't resolve 'stream' in '/var/www/tok/node_modules/keccak/lib/api'
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 }
webpack compiled with 3 errors
It seems like this error is related to the Webpack configuration. How can I resolve it? Any help would be appreciated.