ethereum - slim 和 web3- ReferenceError : process is not defined

Question

我正在尝试将 web3 功能添加到我的 svelte 应用程序中，但在导入 web3 模块时遇到问题。这是我的 package.json 供引用:

{
  "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"
  }
}

我基本上是在尝试根据地址获取契约(Contract)

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

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

在我的 component.svelte 中我这样做:

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

</script>

这给了我以下错误:

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

以下在 React 组件中进行导入的方法适用于此代码:

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

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

React 与 sveltekit 处理此问题的方式有何不同？

我该如何解决这个问题？

Answer 1

我试图通过(vite 驱动的)sveltekit 中的 process.env.MYVAR 使用 secret 的 dotenv 环境变量应用程序，并了解到现在在 sveltekit 中执行此操作的正确方法是 import { env } from '$env/dynamic/private';并且只能在 +page.server.js file's PageServerLoad() function 内访问它