svelte and web3- ReferenceError: process is not defined - ethereum

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

I ended up with using svelte-web3 module instead.

Answer 4

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
}