TypeError: callbackify is not a function - Vite

[snake-py]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I am trying simply to access the networkId as it is shown in the documentation.

  async makeContract() {
    const networkId = await this.web3.eth.net.getId();

    this.contract = new this.web3.eth.Contract(
      EquationToken.abi,
      EquationToken.networks[networkId].address
    );
  }

while this.web3 = new Web3(Web3.givenProvider || this.blockchainBaseUrl);

Expected Behavior

That callbackify is defined or not used and that I can access the networkId.

Steps to Reproduce

Make a new Vite react-ts project install Web3 and instantiate the code I provided.

Web3.js Version

1.7.3

Environment

• Operating System: Win 10
• Browser: Chrome
• Node.js Version: 14.18.3
• NPM Version: 6.14.15

Anything Else?

I saw that there has been an earlier issue, which has been closed two years ago. Am I simply doing something wrong?

[snake-py]

I dug a little into it and noticed that this is probably due to the combination with Vite. I started to polyfill the nodejs.util API. However, it is still not working, even though it is now for sure in the browser. https://pastebin.com/mreVbzUW // this will have the callbackify function https://pastebin.com/KEwfg3w8 // this won't have the callbackify function

[nazarhussain]

Hi @snake-py Thanks for reaching to us with details of the issue. We will investigate it further.

[snake-py]

@nazarhussain Thanks for labeling it:

I think I am now correctly polyfilling the util lib - here is my updated vit.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import EnvironmentPlugin from 'vite-plugin-environment';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';
// @ts-ignore
import path from 'path';

// @ts-ignore
import svgrPlugin from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    EnvironmentPlugin(
      {
        REACT_APP_BLOCKCHAIN_BASE_URL: undefined,
        STATE: undefined,
      },
      { loadEnvFiles: true }
    ),
    svgrPlugin({
      svgrOptions: {
        icon: true,
      },
    }),
    ,
    react(),
    rollupNodePolyFill(),
  ],
  resolve: {
    alias: {
      util: 'util/util',
      process: 'process/browser',
      events: 'rollup-plugin-node-polyfills/polyfills/events',
      stream: 'stream-browserify',
      buffer: 'buffer/',
      zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
      '@': path.resolve(__dirname, './src'),
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeModulesPolyfillPlugin(),
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [rollupNodePolyFill()],
    },
  },
});

I also added theses lines to my index.html

    <script>
      window.global = window;
    </script>
    <script type="module">
      import process from 'process';
      import { Buffer } from 'buffer';
      import EventEmitter from 'events';
      import util from 'util';
      console.log(util.callbackify);
      window.util = util;
      window.Buffer = Buffer;
      window.process = process;
      window.EventEmitter = EventEmitter;
    </script>

The log out put will actually show that util is correctly imported and callbackify is avails.

[mfolnovic]

@snake-py have you maybe figured out how to workaround this? tnx! :)

[snake-py]

@snake-py have you maybe figured out how to workaround this? tnx! :)

No I have not. I think the fastest solution is to ditch either Vite or Web3js. Ethers.js was recommended to me.

[mfolnovic]

unfortunately, i'd like to use web3js-quorum so ethers.js isn't an option for me :(

my workaround is to put <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script> in index.html and use window.Web3 instead of importing it :)

[nazarhussain]

@snake-py Did you tried the following documentation steps.

https://github.com/ChainSafe/web3.js#web3-and-create-react-app

We had tested it with React and Angular and documented the known issues and workaround for it. We are investing all our resources to the 4.x rewrite right now, so not sure if we can look into this issue right away.

Please follow the steps in the above link and see if it works. Let us know so we can plan it for future sprints.

[snake-py]

@nazarhussain I am not using webpack I am using Vite. But in essence, I am polyfilling all of these libraries. I am gonna look at it again and see if I can find a way out.

[wompeter]

Any luck with this? I'm running into a similar error with Vite dying on [commonjs] Unexpected token (42:10) in ....../node_modules/web3-core-requestmanager/lib/givenProvider.js

Runs fine in dev but once it tries to build with rollup it dies on this

[snake-py]

@wompeter if you could get it work in dev then I should ask you how you did it, because I went to use the CDN. I couldn't properly polyfill this even for dev? Would you be willing to share how you did the dev set up?

[wobsoriano]

This is how I fixed it in Vite:

1. Install the latest version of util but change the name in package.json

{
  "dependencies": {
    "util2": "npm:[email protected]",
    "web3": "^1.7.3"
  }
}

2. Alias it

export default defineConfig({
  resolve: {
    alias: {
      util: 'util2'
    },
  },
})

https://github.com/wobsoriano/nuxt-web3.js

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[mfolnovic]

not stale, still an issue.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[snake-py]

I guess it is still not working is it?

[Muhammad-Altabba]

I guess it is still not working is it?

Hello @snake-py and @mfolnovic Did the workaround https://github.com/web3/web3.js/issues/4992#issuecomment-1272601252 proposed by wobsoriano works for you?

[wobsoriano]

@Muhammad-Altabba is there anything stopping us from updating util from 0.12.0 to >=0.12.4 in the web3 request manager package?

[Muhammad-Altabba]

@Muhammad-Altabba is there anything stopping us from updating util from 0.12.0 to >=0.12.4 in the web3 request manager package?

Sure, we can check this option, if it would solve the issue.

[wobsoriano]

Opened a PR @Muhammad-Altabba

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions. If you believe this was a mistake, please comment.

[Muhammad-Altabba]

Merged at https://github.com/web3/web3.js/pull/5700