bitcoinjs / bip39

JavaScript implementation of Bitcoin BIP39: Mnemonic code for generating deterministic keys
ISC License
1.11k stars 447 forks source link

browser support? #78

Closed NullVoxPopuli closed 6 years ago

NullVoxPopuli commented 6 years ago

I'm interested in using this in a browser-context. Is that possible? currently, I have issues with safe-buffer not existing when I try to use this library.

thanks!

dcousens commented 6 years ago

@NullVoxPopuli what issues are you experiencing specifically? This project does work if you use browserify or web-pack or the like.

NullVoxPopuli commented 6 years ago

I'm actually trying not to use browserify (feels hacky), webpack (personal vendetta), and am using rollup and broccoli.

if I just try to load the module directly: node_modules/bip39/index.js I get this error when my app boots (breaking all the things / not even rendering a page):

Could not find module `safe-buffer` imported from `(require)`

(same error happens when I try an amd transform on it)

if I do a common-js transform on it, my app loads, and then I get this error when I import the module:

Error: Could not find module `buffer` imported from `bip39`
TypeError: Cannot read property 'exports' of undefined

I have a unit test that file that only has:

import * as bip from 'bip39';
console.log(bip);
dcousens commented 6 years ago

@NullVoxPopuli this isn't an issue of this module.

We have safe-buffer listed as a dependency in our package.json: https://github.com/bitcoinjs/bip39/blob/bafbcd352a6a5275bbc640a79c3917d0baee5bc8/package.json#L30

The tools are what you need to fix :+1:

NullVoxPopuli commented 6 years ago

I have safe-buffer, which looking at the index.js inside safe-buffer, "it" is trying to require buffer which isn't in my node_modules.

This also confirms that cjs is the correct transform. thanks.

dcousens commented 6 years ago

@NullVoxPopuli you'll need to add Buffer to your bundling setup.

OOI, why do you think browserify is "hacky"?

Red3nzo commented 2 years ago

@dcousens Do you have any links as to where I can add Buffer to my webpack build, I'm, new to webpack?

junderw commented 2 years ago

@thatsbrandon This question is better asked on a webpack forum/issue.

I do remember faintly that latest webpack requires some extra configuration to include Buffer.

NullVoxPopuli commented 2 years ago

@dcousens the problem is that browserify "does what it needs to" to make "the build work" giving no cares for bundle size. polyfill node builtins bloats the output JS a ton.

Here is a < 100 line version of bip39(ish), using native browser APIs: https://github.com/NullVoxPopuli/emberclear/blob/31c2807ade0f09da1ace435b0a90267c3b2bddd3/client/web/addons/crypto/addon/workers/crypto/utils/mnemonic.ts

(ish) = I haven't tested against bip39, and don't need to for that specific app

Red3nzo commented 2 years ago

@junderw Thank you! I ended up looking into this extra configuration for Buffer in webpack & I found the solution which was to create my own resolve.fallback polyfill. I got my extension to compile a run without an issue