I want use "web3" and "walletconnect/web3-provider" package on vue & laravel 8. I install it by npm i --save web3 @walletconnect/web3-provider command and after that I add follows codes for import to 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: ";, // Required
    qrcodeModal: QRCodeModal,
});
window.walletConnector = connector;

//  Create WalletConnect Provider
const provider = new WalletConnectProvider({
    infuraId: "27e484dcd9e3efcfd25a83a78777cdf1",
});

//  Enable session (triggers QR Code modal)
await provider.enable();

But i get this 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

Apparently this error is related to Webpack configuration. How can I solve it? Someone can help me?

I want use "web3" and "walletconnect/web3-provider" package on vue & laravel 8. I install it by npm i --save web3 @walletconnect/web3-provider command and after that I add follows codes for import to 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();

But i get this 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

Apparently this error is related to Webpack configuration. How can I solve it? Someone can help me?

• javascript
• laravel
• vue.js
• webpack
• web3js

• 1 I have no idea about this, but as the message tells you, did you try installing stream-browserify as it recommends ? did you try anything ? – matiaslauriti Commented May 1, 2021 at 22:50
• I install "stream-browserify" and add it to the web pack configuration in the form resol.fallback.stream: Requetime.resolve ("stream-browserify"). The problem was solved :) Thank you. – Amin Commented May 3, 2021 at 5:21
• downgrading react-scripts to 4.0.3 worked for me. see stackoverflow.com/questions/70446839/react-js-with-web3-issue – davidfloyd91 Commented Feb 20, 2022 at 6:08

4 Answers 4

Run npm i react-app-rewired

Create config-overrides.js file and add this:

const webpack = require('webpack');
module.exports = function override(config, env) {

    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;
}

Install all the packages from config-overrides.js.

In package.json, replace the scripts:

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

Due to the removal of default polyfills in webpack5, you must install the following utilities:

yarn add buffer util stream-browserify assert stream-http url https-browserify os-browserify

OR

npm install buffer util stream-browserify assert stream-http url https-browserify os-browserify

Then, add the following code snippet to your webpack.config.js:

resolve: {
 fallback: {
   fs: false,
   'stream': require.resolve('stream-browserify'),
   'buffer': require.resolve('buffer/'),
   'util': require.resolve('util/'),
   'assert': require.resolve('assert/'),
   'http': require.resolve('stream-http/'),
   'url': require.resolve('url/'),
   'https': require.resolve('https-browserify/'),
   'os': require.resolve('os-browserify/'),
 },
}

If you are using an application built on create-react-app locally, you must run npm run eject to be able to customize your webpack configuration.

You can fix it by specifying the empty fallbacks like this:

fallback: { "http": false, "https": false, "stream": false, "tty": false, "zlib": false }

This goes in the resolve section in the webpack config:

{
        mode: isDevBuild ? 'development' : 'production',
        target: ['web', 'es5'],
        resolve: {
            extensions: ['.js'],

            /* polyfills used to be included, now they must be manually added. however, they will error out if not added */
            /* thus the :false fallbacks */
            fallback: { "http": false, "https": false, "stream": false, "tty": false, "zlib": false }
        },

If your error starts like this 'Module not found: Error: Can't resolve 'http' ...' installing url-loader will do the trick. Just install it using npm. npm install --save-dev url-loader