Error with WEB3js - NodeJs.utils in vite react ts app - How to resolve TypeError: callbackify is not a function

Question

Hey I am playing around with web3 inside react as a client application (using vite react-ts) and trying to call web3.eth.net.getId() but this will throw me an error that callbackify is not a function I digged a little and found an old issue on the github which states that older versions of Nodejs.util (prior version 0.11) didn't have this function. So I checked the package.json where the error occurs (web3-core-requestmanager) it has "util":"^0.12.0", so callbackify should be available.

In fact when I am looking at their imports, they seem to be able to import it: (following code is ./node_modules\web3-core-requestmanager\src\index.js

const { callbackify } = require('util');

but when they want to use it, callbackify is undefined

//RequestManager.prototype.send function
const callbackRequest = callbackify(this.provider.request.bind(this.provider));

I tried to play around with the dependencies and tried different versions of web3.js (1.7.3; 1.6.0; 1.5.1) all of them had the same util dependency (0.12.0).

My code in all this matter looks like this:

class Blockchain {
  public blockchainBaseUrl: string;
  public web3;
  public provider;
  public account: string = '';
  public contract: any;
  constructor() {
    if (process.env.REACT_APP_BLOCKCHAIN_BASE_URL === undefined) {
      throw new Error('REACT_APP_BLOCKCHAIN_BASE_URL is not defined');
    }
    this.provider = window.ethereum;
    if (this.provider === undefined) {
      throw new Error('MetaMask is not installed');
    }
    this.setUpInitialAccount();
    this.addEthereumEventListener();
    this.blockchainBaseUrl = process.env.REACT_APP_BLOCKCHAIN_BASE_URL;
    this.web3 = new Web3(Web3.givenProvider || this.blockchainBaseUrl);
    this.setContract();
  }

  async setContract() {
    // error comes from the next line
    const networkId = await this.web3.eth.net.getId();

    this.contract = new this.web3.eth.Contract(
      // @ts-ignore
      Token.abi,
      // @ts-ignore
      Token.networks[networkId].address
    );
  }
}

I also was told that I should simply add a .catch() to web3.eth.net.getId() but this did nothing. Am I doing something wrong or is this a dependency problem? If anyone could point me in the right direction I would really appreciate it. Do I need to expose the util API to the browser somehow? To me, it seems that the API is simply not available.

This is should be the relevant part of my vite.config.ts:


import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill';
import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
  ],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeModulesPolyfills(),
        GlobalsPolyfills({
          process: true,
          buffer: true,
        }),
      ],
      define: {
        global: 'globalThis',
      },
    },
  },
});

Here is my complete vite config https://pastebin.com/zvgbNbhQ

Update

By now I think that I understand the issue - it seems that it is a VIte-specific problem and I need to polyfill the NodeJs.util API. I am already doing this (at least I thought). Perhaps someone can provide some guidance on what I am doing wrong with my config?

Update 2

I actually have now the util API inside the browser, but it is still giving me the same error. This is my new config: https://pastebin.com/mreVbzUW I can even log it out:

Update 3

SO I am still facing this issue - I tried a different approach to polyfill I posted the update to the github issue https://github.com/ChainSafe/web3.js/issues/4992#issuecomment-1117894830

Dan4ik · Accepted Answer · 2022-05-03 21:27:27Z

2

Had similar problem with vue3 + vite + we3

It's started from errors: process in not defined than Buffer is not defined and finally after I configure polyfill I came to callbackify is not defined

Did a lot of researches and finally solved this issue with next trick:

Rollback all polyfill configurations
Add to the head html file

<script>window.global = window;</script>
<script type="module">
    import process from "process";
    import { Buffer } from "buffer";
    import EventEmitter from "events";
    
    window.Buffer = Buffer;
    window.process = process;
    window.EventEmitter = EventEmitter;
</script>

vite.config.ts

import vue from '@vitejs/plugin-vue'

export default {
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
      util: 'util'
    }
  },
  plugins: [
    vue(),
  ]
}

add these dependencies browserify-zlib, events, process, stream-browserify, util

Source https://github.com/vitejs/vite/issues/3817#issuecomment-864450199

Hope it will helps you

answered May 3, 2022 at 21:27

Dan4ik

457 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Snake_py Over a year ago

Hey thank you for your answer, I am already doing this. But it seems something else is wrong. Because I am already doing the polyfilling part.

Collectives™ on Stack Overflow

Error with WEB3js - NodeJs.utils in vite react ts app - How to resolve TypeError: callbackify is not a function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related