process is not defined when importing Web3 in a SvelteKit page.

[skoshx]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Importing Web3 in any SvelteKit page with import Web3 from 'web3'; results in an error "process is not defined". Error stems from web3-core-requestmanager that uses some callbackify function from node js util package that uses process.

Expected Behavior

It is expected that Web3 works in the browser. Right now because of this bug I am not able to use Web3 at all in the browser.

Steps to Reproduce

Reproduction here: https://github.com/skoshx/web3-sveltekit-repro

Literally just add following in any page:

<script>
import Web3 from 'web3';
</script>

To demonstrate that this is not a SvelteKit specific issue the following causes same error, even though the following ONLY runs in the browser:

<script lang="ts">
  import { onMount } from 'svelte';
  onMount(async () => {
    const Web3 = await import('web3');
  });
</script>

Web3.js Version

1.7.1

Environment

• Operating System: macOS
• Browser: Chrome
• Node.js Version: v16.13.0
• NPM Version: 8.1.0

Anything Else?

No response

[luu-alex]

I replied to your message on discord, i'll be closing this issue and hopefully I can help debug this on discord

[skoshx]

@luu-alex Thanks a lot! For posterity:

If anyone else stumbles upon this issue, I solved it following this article: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

Basically add that to svelte.config.js in the vite field.

[Garito]

Any less violent solution?
Like this library publishing a proper packaged for this use cases?

[wobsoriano]

Any less violent solution? Like this library publishing a proper packaged for this use cases?

move to ethers or don't use vite hahaha

[skoshx]

@Garito I found that switching to ethers, made my life so much better. Literally everything seems to work better with ethers. Recommend switching.

[Garito]

Is this packet not maintained?

[skoshx]

@Garito As you can see from the commit history, it defenitely is maintained, just think ethers.js has a simpler and better API.

[wobsoriano]

I got it working with Nuxt 3 + Vite tho

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

[Garito]

@skoshx and you don't find your comments about changing libraries a little rude?

[skoshx]

@Garito Defenitely not. As i said, my opinions are strictly subjective, but sharing opinions is important, since others can base their decisions based on other people's opinions. Criticism is important in the developer community, and I don't think people should hold back criticism just because it might seem "rude". Criticism is what fuels improvement.

I just wanted to share my positive experience of switching to ethers.js, maybe someone will benefit from it.

[Garito]

I will be agree with you in another context but...
You are adding nothing here
Besides, that comment will be ok for a beginner, but if you have a good chunk of code what then?
I will stop this conversation here now since, as i already said, it contributes nothing

[skoshx]

If anyone else stumbles upon this issue, I solved it following this article: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2

@Garito This is what I commented earlier. If you are using web3.js in a larger codebase, then you can follow that article to fix the problem.

[Garito]

And as I ask before...

Any less violent solution? Like this library publishing a proper packaged for this use cases?

I don't think I'm asking something very extreme, isn't it? A library level solution for this

Another issue will be that the maintainers of this packet don't care (the ethers solution will seem much more reasonable then)