0
466
ViewsWeb3js no se puede importar en el proyecto API de composición de Vue3
Creé un nuevo proyecto con npm init vite bar -- --template vue . Hice una npm install web3 y puedo ver que mi package-lock.json incluye este paquete. Mi directorio node_modules también incluye los módulos web3 .
Entonces agregué esta línea a main.js :
import { createApp } from 'vue' import App from './App.vue' import Web3 from 'web3' <-- This line createApp(App).mount('#app') Y me sale el siguiente error: 
No entiendo lo que está pasando aquí. Soy bastante nuevo en el uso de npm , así que no estoy muy seguro de qué buscar en Google. Los errores provienen de node_modules/web3/lib/index.js , node_modules/web3-core/lib/index.js , node_modules/web3-core-requestmanager/lib/index.js y, finalmente, node_modules/util/util.js . Sospecho que tiene que ver con uno de estos:
- estoy usando vue 3
- Estoy usando la API de composición de Vue 3
- Estoy usando la etiqueta Vue 3 Composition API SFC
<script setup>(pero la importé enmain.js, así que no creo que sea esta) -
web3jsestá en Typescript y mi proyecto Vue3 no está configurado para Typescript
Pero como soy bastante nuevo en JavaScript, Vue y Web3, no estoy seguro de cómo enfocar mi búsqueda en Google en este error. Mi formación es Python, Go, Terraform. Básicamente, la parte trasera de la parte trasera. JavaScript front-end es nuevo para mí.
¿Cómo hago para resolver este problema?
3 answers
Answer question0
Parece que web3 puede ejecutarse en Node o en navegadores, y la secuencia de comandos principal predeterminada del paquete web3 es una fuente sin procesar/sin compilar que incluye código específico de Node (incluidos process , global , Buffer y probablemente otros).
web3 distribuye un script incluido en web3/dist/web3.min.js , que puede ejecutarse en el navegador sin ninguna configuración (enumerado como "pure js" ). Debería importar ese archivo específico en el navegador:
import Web3 from 'web3/dist/web3.min.js' const web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546') Para habilitar la inferencia de tipo para Web3 (y para resolver Could not find a declaration file for module 'web3/dist/web3.min.js'. ), cree un archivo de declaración de tipo para web3.min.js :
// src/web3.d.ts declare module 'web3/dist/web3.min.js' { import Web3 from 'web3' export default Web3 }0
Puede evitar el error Uncaught ReferenceError: process is not defined al agregar esto en su configuración de vite
export default defineConfig({ // ... define: { 'process.env': process.env } })0
Encontré la mejor solución.
El problema es que pierde la variable window.process y el proceso existe solo en el nodo, no en el navegador.
Por lo tanto, debe inyectarlo en el navegador cuando se carga la aplicación.
Agregue esta línea a su aplicación:
window.process = { ...window.process, };