svelte and web3- ReferenceError: process is not defined

Question

I am trying to add web3 functionality to my svelte app, but experience problems when importing the web3 module. Here is my package.json for reference:

{
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "test": "mocha",
    "start": "PORT=3000 node build/",
    "dev": "svelte-kit dev",
    "dev-host": "svelte-kit dev --host",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-node": "^1.0.0-next.55",
    "@sveltejs/kit": "next",
    "@types/cookie": "^0.4.1",
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "dayjs": "^1.10.4",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "js-yaml": "^3.14.1",
    "jsonwebtoken": "^8.5.1",
    "password-hash": "^1.2.2",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "rehype-highlight": "^4.1.0",
    "rehype-stringify": "^8.0.0",
    "remark-frontmatter": "^3.0.0",
    "remark-gfm": "^1.0.0",
    "remark-parse": "^9.0.0",
    "remark-rehype": "^8.0.0",
    "sass": "^1.0.0",
    "svelte": "^3.34.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.9.4",
    "to-vfile": "^6.1.0",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3",
    "unified": "^9.2.1",
    "vite": "^2.1.0",
    "mocha": "^9.1.2"
  },
  "dependencies": {
    "@fontsource/fira-mono": "^4.5.0",
    "better-sqlite3": "^7.4.4",
    "cookie": "^0.4.1",
    "solc": "^0.4.17",
    "web3": "^1.6.0",
    "@truffle/hdwallet-provider": "^1.5.1",
    "fs-extra": "^10.0.0",
    "ganache-cli": "^6.12.2"
  }
}

I am basically trying to fetch a contract based on a addres

import web from './web3';
import Contract from './build/Contract.json';

export default (address) => {
    return new web.eth.Contract(
        JSON.parse(Contract.interface),
        address
    );
};

In my component.svelte i do:

<script>
    
    import Contract from "../../../etherum/contract.js";    

</script>

Which gives me the following error:

util.js:109 Uncaught (in promise) ReferenceError: process is not defined
    at node_modules/util/util.js (util.js:109)
    at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
    at node_modules/web3-core-requestmanager/lib/index.js (index.js:20)
    at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
    at node_modules/web3-core/lib/index.js (index.js:22)
    at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
    at node_modules/web3/lib/index.js (index.js:29)
    at __require2 (chunk-VPFHXPC5.js?v=bd5ef6bd:36)
    at dep:web3:1
node_modules/util/util.js   @   util.js:109
__require2  @   chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3-core-requestmanager/lib/index.js  @   index.js:20
__require2  @   chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3-core/lib/index.js @   index.js:22
__require2  @   chunk-VPFHXPC5.js?v=bd5ef6bd:36
node_modules/web3/lib/index.js  @   index.js:29
__require2  @   chunk-VPFHXPC5.js?v=bd5ef6bd:36
(anonymous) @   dep:web3:1
await in (anonymous) (async)        
(anonymous) @   (index):273

The following way of doing imports in an react component works with this code:

import Contract from "../../ethereum/contract";

static async getInitialProps(props) {
        const campaign = Contract(props.query.address);

What's the difference between how React handles this vs sveltekit?

And how do I solve this?

Answer 1

I had the same problem and ran across this issue: https://github.com/vitejs/vite/issues/3817

In contradiction to this proposed solution, I found out that adding the following code in +layout.svelte instead of app.html is a working solution:

import process from "process";
import { Buffer } from "buffer";
import EventEmitter from "events";
import { browser } from "$app/environment";

if(browser) {
    window.Buffer = Buffer;
    window.process = process;
    (window as any).EventEmitter = EventEmitter;
    window.global = window
}

Answer 2

I was trying to use a secret dotenv environment variable via process.env.MYVAR inside a (vite-powered) sveltekit app, and learned that the right way to do that now in sveltekit is to import { env } from '$env/dynamic/private'; and only access it within a +page.server.js file's PageServerLoad() function

Answer 3

I ended up with using svelte-web3 module instead.

Answer 4

I found the best solution.

The problem is because you lose window.process somewhere in the development environment, and process exists only on node, not the browser.

So you should inject it to browser when the app loads.

Add this line to your app

window.process = {
  ...window.process,
};