Estoy usando VueJS v3 e intento generar y mostrar un mnemotécnico BIP39 usando la biblioteca bip39 . Sin embargo, recibo un error en la consola del navegador:
Uncaught ReferenceError: global is not defined _stream_readable.js:48:20 js _stream_readable.js:48 __require chunk-PWNRNYY6.js:23 js readable-browser.js:1 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 js browser.js:3 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 <anonymous> bip39:1 js _stream_readable.js:48 __require chunk-PWNRNYY6.js:23 js readable-browser.js:1 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 js browser.js:3 __require chunk-PWNRNYY6.js:23 js index.js:3 __require chunk-PWNRNYY6.js:23 <anonymous> bip39:1 InnerModuleEvaluation self-hosted:2393 InnerModuleEvaluation self-hosted:2393 InnerModuleEvaluation self-hosted:2393 InnerModuleEvaluation self-hosted:2393 evaluation self-hosted:2354 <script setup> import { generateMnemonic } from "bip39"; import {ref} from "vue"; let mnemonic = ref(null); mnemonic.value = generateMnemonic(); </script> <template> <div v-if="mnemonic !== null"> <h1>{{ mnemonic }}</h1> </div> </template>Paquete.json
{ "name": "vue-app", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview --port 5050" }, "dependencies": { "bip39": "^3.0.4", "pinia": "^2.0.11", "vue": "^3.2.31", "vue-router": "^4.0.12" }, "devDependencies": { "@vitejs/plugin-vue": "^2.2.2", "vite": "^2.8.4" } } Puedo hacer que esto funcione fuera de Vue en un simple .js .
Sin embargo, tengo que decir que no me fue fácil probar ese módulo. Creo que está diseñado para ejecutarse en el lado del servidor y no en el navegador como este. También puede haber algunas consideraciones de seguridad a tener en cuenta si está usando esto en producción, pero ese es un tema aparte.
Aquí hay un componente de Vue en funcionamiento que construí para demostrar el uso:
<template> <div class="hello"> <div v-if="mnemonic"> <p><b>Result</b>: {{ mnemonic }} </p> </div> <div v-else>Loading....</div> </div> </template> <script> import { mnemonicToSeed } from 'bip39'; export default { name: "GenerateMnemonic", props: { msg: String }, data() { return { mnemonic: null, }; }, mounted() { mnemonicToSeed('basket actual') .then(bytes => bytes.toString('hex')) .then((result) => { this.mnemonic = result; }); }, }; </script> <style scoped> .hello { max-width: 500px; overflow-wrap: break-word; margin: 0 auto; text-align: left; padding: 0 0.5rem; border: 1px solid #2c3e50; border-radius: 0.25rem; } </style>