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 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 2

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
}