6

I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.

So then I added this line to main.js:

import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3'   <-- This line


createApp(App).mount('#app')

And I get the following error: Uncaught ReferenceError: process is not defined

I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:

  1. I'm using Vue 3
  2. I'm using Vue 3 Composition API
  3. I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
  4. web3js is in Typescript and my Vue3 project is not configured for Typescript

But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.

How do I go about resolving this issue?

Improve this question
2
  • Wow ok, so I found this comment: github.com/vitejs/vite/issues/1973#issuecomment-787571499 Commented Aug 29, 2021 at 18:37
  • But then I get Uncaught ReferenceError: global is not defined with a similar chain of errors... Commented Aug 29, 2021 at 18:37

3 Answers 3

Reset to default
17

Option 1: Polyfill Node globals/modules

Polyfilling the Node globals and modules enables the web3 import to run in the browser:

  1. Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D @esbuild-plugins/node-globals-polyfill
npm i -D @esbuild-plugins/node-modules-polyfill

  1. Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.

  2. Configure define to replace global with globalThis (the browser equivalent).

import { defineConfig } from 'vite'
import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill'

export default defineConfig({
  ⋮
  optimizeDeps: {
    esbuildOptions: {
      2️⃣
      plugins: [
        NodeModulesPolyfills(),
        GlobalsPolyfills({
          process: true,
          buffer: true,
        }),
      ],
      3️⃣
      define: {
        global: 'globalThis',
      },
    },
  },
})

demo 1

Note: The polyfills add considerable size to the build output.

Option 2: Use pre-bundled script

web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:

import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  resolve: {
    alias: {
      web3: 'web3/dist/web3.min.js',
    },

    // or
    alias: [
      {
        find: 'web3',
        replacement: 'web3/dist/web3.min.js',
      },
    ],
  },
})

demo 2

Note: This option produces 469.4 KiB smaller output than Option 1.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You saved my day here! I went with option 1 and it works like a charm. Thank you!
0

You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config

export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})
Improve this answer

Comments

0

I found the best solution.

The problem is because you lose window.process variable, 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,
};
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.