0
465
ViewsWeb3js fails to import in Vue3 composition api project
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:
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:
- I'm using Vue 3
- I'm using Vue 3 Composition API
- I'm using Vue 3 Composition API SFC
<script setup>tag (but I imported it inmain.jsso I don't think it is this one) web3jsis 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?
3 answers
Answer question0
It looks like web3 can run in either Node or browsers, and the default main script of the web3 package is raw/uncompiled source that includes Node-specific code (including process, global, Buffer, and probably others).
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 should be importing that specific file in the browser:
import Web3 from 'web3/dist/web3.min.js'
const web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546')
To enable type inference for Web3 (and to resolve Could not find a declaration file for module 'web3/dist/web3.min.js'.), create a type declaration file for web3.min.js:
// src/web3.d.ts
declare module 'web3/dist/web3.min.js' {
import Web3 from 'web3'
export default Web3
}
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
}
})
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,
};