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?

Thanks for any help!

Answer 1

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,
};

Answer 2

I ended up with using svelte-web3 module instead.