Vite + Web3 : "TypeError: Cannot read properties of undefined (reading 'call')"

[nybroe]

Describe the bug

I am running a vite.js app with web3 installed.
When I run the app in dev mode, all works fine but when I run it in production mode (build + preview) it fails in the console with:
"TypeError: Cannot read properties of undefined (reading 'call')".
The build itself goes through fine.

I can confirm that the error comes from the contract method generated from my ABI:
contract.methods.isOwner(sender).call({from: sender}, function (err, res)
If I comment it out I wont get the error.

Reproduction

https://github.com/nybroe/web3_vite_call_of_undefined/tree/main

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
    Memory: 35.34 GB / 63.73 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.50)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vite: ^2.7.2 => 2.9.6

Used Package Manager

npm

Logs

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call')
    at tS.Q1 (index.4c6ddf14.js:49:31241)
    at new jc (index.4c6ddf14.js:49:52725)
    at new tS (index.4c6ddf14.js:49:55512)
    at index.4c6ddf14.js:49:57789
    at index.4c6ddf14.js:49:62640
    at index.4c6ddf14.js:49:9995
    at o (index.4c6ddf14.js:49:84548)
    at Object.d (index.4c6ddf14.js:49:84731)
    at Object.Hb [as sha3] (index.4c6ddf14.js:50:20120)
    at Ft.KG [as outputFormatter] (index.4c6ddf14.js:51:2148)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[patak-dev]

Moving to a discussion, the reproduction requires installing metamask and there are a lot of dependencies like buffer used. If you can create a minimal reproduction of a Vite issue, please create another bug report. If not, this looks like a setup issue as you are using dependencies that are using node builtins. You can also join https://chat.vitejs.dev or check the issues in the repo. Looks like other users are dealing with web3 issues. Ideally, web3 will offer a package that properly works in the browser.

[nybroe]

@patak-dev
I created a new bug report where I removed all other dependencies. Repro steps is updated on the README in the repo:
#7941

[tony19]

Using the pre-bundled web3 script seems to workaround the problem:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  resolve: {
    alias: {
      web3: 'web3/dist/web3.min.js',
    },

    // or
    alias: [
      {
        find: 'web3',
        replacement: 'web3/dist/web3.min.js',
      },
    ],
  },
})

[tnkerer]

@tony19 it also helped me!

[TheoOliveira]

Worked for me as well. Thanks, in my case that worked on vercel but after changed that it worked.

[chendind]

Thank you very much !@tony19

[cfmj]

it works in dev mode, but not work after build

[billal-fahmid]

thanks. it's really very helped me

[spking11]

What if I only want to use a module in web3 like web3-eth-abi?
I do as this, and in dev mode there is no problem, but after build and preview I encounter the same issue to yours. It's so strange, I debug the code with sourcemap and find the requrie statement seems not work well, then cause Readable to be undefined.

[andr3medeiros]

I tried everything I could on this and got nothing. Tried installing and yarn resolute readable-stream 3.6.0, change directly on resolve.alias, find another package... nothing seems to help. My vite.config.ts:

import { esbuildCommonjs, viteCommonjs } from '@originjs/vite-plugin-commonjs';
import inject from '@rollup/plugin-inject';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react({
			babel: {
				plugins: [
					[
						'babel-plugin-styled-components',
						{
							// TODO - Check if needs to be manually disabled for production
							// https://vitejs.dev/config/#conditional-config
							displayName: true,
							fileName: true,
						},
					],
				],
			},
		}),
		wasm(),
		viteCommonjs(),
	],
	define: {
		'process.env': process.env,
		'process.browser': 'chrome',
	},
	envPrefix: 'IGGW_',
	optimizeDeps: {
		esbuildOptions: {
			define: {
				global: 'globalThis',
			},
			inject: ['./shims/buffer.ts', './shims/global.ts', './shims/process.env.ts'],
			plugins: [esbuildCommonjs(['crypto-browserify'])],
		},
	},
	build: {
		outDir: 'build',
		target: 'esnext',
		sourcemap: 'inline',
		rollupOptions: {
			plugins: [
				inject({
					modules: { Buffer: ['buffer', 'Buffer'] },
				}),
			],
			output: {
				manualChunks(id) {
					if (id.includes('node_modules')) {
						const nodeModules = id.toString().split('node_modules/');
						const moduleChildren = nodeModules[1].split('/')[0];

						return moduleChildren.toString();
					}
				},
			},
		},
	},
	resolve: {
		alias: {
			stream: 'stream-browserify',
			crypto: 'crypto-browserify',
			assert: 'assert',
			http: 'stream-http',
			https: 'https-browserify',
			url: 'url',
			os: 'os-browserify/browser',
			buffer: 'buffer',
			util: 'util/',
		},
	},
});

[cfmj]

same error

[mcclux]

I'm encountering this same error using vite + vue plus the taquito library for Tezos, although I get it in the dev build as well. I've put together a minimal repo here that illustrates the error: https://github.com/mcclux/balance-debug I don't believe it's an issue with the taquito library because I can use it in a pure typescript example and it works as expected

[mcclux]

Just a note to say that this works as expected when I use Nuxt rather than vite

[zamia]

Just sharing...
I am also encoutering the same problem when developing a Solana DApp using vite. I try to find solution the whole day but I have to migrate to vue-cli(webpack) to fix my problem.

Many web3 related package, based on my experience, they are all depended on node-polyfills, such as bip39, ed25519-hd-key, etc.

Vite has a great experience when developing, but it is pity I have to use another tool which is slow/hard-to-configure. Hope vite support nodejs polyfills one day.

[kvchen95]

Since vite v2.8 previously separated the business code from node_modules, the dependencies will be packaged into vender file. After v2.8 the business code and external dependencies will be packaged into one file. If this configuration is still required, You need to import the splitVendorChunkPlugin yourself to support this configuration

if u have a setting in vite.config.ts like me:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            const strArr = id.toString().split('node_modules/')
            const arr = strArr[strArr.length - 1].split('/')
            switch (arr[0]) {
              case '@vue':
              case 'ant-design-vue':
              case '@ant-design':
                return '_' + arr[0]
              default:
                // remove this
                // return '__vender'
                // use the default setting
                return 
            }
          }
        }
...

[keshariamudit24]

Hi there, I'm encountering the following error..
TypeError: Cannot read properties of undefined (reading 'Web3Provider')

import { ethers } from 'ethers';

const getEthereumContract = () => {
    const { ethereum } = window; // Destructure here, inside the function

    if (!ethereum) {
        console.log("No Ethereum object found. Make sure you have MetaMask installed.");
        return null;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const transactionContract = new ethers.Contract(contractAddress, contractABI, signer);

    console.log({
        provider, 
        signer,
        transactionContract
    });

    return transactionContract;
}

can someone help me out

[tnkerer]

Hi there, I'm encountering the following error.. TypeError: Cannot read properties of undefined (reading 'Web3Provider')

import { ethers } from 'ethers';

const getEthereumContract = () => {
    const { ethereum } = window; // Destructure here, inside the function

    if (!ethereum) {
        console.log("No Ethereum object found. Make sure you have MetaMask installed.");
        return null;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const transactionContract = new ethers.Contract(contractAddress, contractABI, signer);

    console.log({
        provider, 
        signer,
        transactionContract
    });

    return transactionContract;
}

can someone help me out

You are probably using ethers v6 or above, ethers has changed a lot from v5 and Web3Provider is not a method of providers anymore. Try either using:

const provider = new ethers.BrowserProvider(ethereum);

Or downgrading your ethers version (you can look at package.json to make sure which version you are using). To downgrade it you have to:

• Delete your /node_modules and package-lock.json / yarn.lock
• Downgrading ethers in your package.json to version 5.x, I recommend [email protected]
• Re-installing packages by running either npm i or yarn install