is browser supported?

[acailly]

Hi, I just tried to build a browser app with the following code and I have an issue concerning blake2b-wasm wich uses node fs module.

var hyperdb = require('hyperdb')
var ram = require('random-access-memory')
var db = hyperdb(function (filename) {
     return ram()
   })

db.put('/hello', 'world', function (err) {
  if (err) throw err
  db.get('/hello', function (err, nodes) {
    if (err) throw err
    console.log('/hello --> ' + nodes[0].value)
  })
})

Is hyperdb working on browser?

[hackergrrl]

How are you running this? Have you tried browserify?

$ npm i -g browserify
$ npm i hyperdb random-access-memory
$ cat > index.js
var hyperdb = require('hyperdb')
var ram = require('random-access-memory')
var db = hyperdb(function (filename) {
     return ram()
   })

db.put('/hello', 'world', function (err) {
  if (err) throw err
  db.get('/hello', function (err, nodes) {
    if (err) throw err
    console.log('/hello --> ' + nodes[0].value)
  })
})
^D
$ browserify index.js > bundle.js
$ cat > index.html
<script src="bundle.js"></script>
^D
$ chromium index.html  # or your js-supporting browser of choice

When I open the terminal I see /hello --> world.

[acailly]

It works with browserify but not with webpack. I use create-react-app and don't want to customize the webpack config if I have other choice.

Webpack is the build tool used by the main react boilerplate (create-react-app) and by the angular CLI so I don't think I will be the only one to encounter this problem. This could be a barrier to the adoption of this lib.

The root cause seems to be the use of brfs which is browserify compatible but not webpack compatible. I haven't find any satisfiying solution yet. Will post it if I find it.

[mafintosh]

Can you share the webpack error you get? I'm sure we can fix that.

[acailly]

Sure!

Error

Uncaught TypeError: fs.readFileSync is not a function
    at Object.<anonymous> (index.js:4)
    at Object../node_modules/blake2b-wasm/index.js (index.js:130)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../node_modules/blake2b/index.js (index.js:2)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../node_modules/sodium-javascript/crypto_generichash.js (crypto_generichash.js:1)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../node_modules/sodium-javascript/index.js (index.js:1772)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../node_modules/sodium-universal/browser.js (browser.js:1)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object.<anonymous> (hash.js:1)
    at Object../node_modules/hyperdb/lib/hash.js (hash.js:44)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object.<anonymous> (index.js:1)
    at Object../node_modules/hyperdb/index.js (index.js:702)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../src/test.js (test.js:1)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at fn (bootstrap c4369025988989c2bc5b:87)
    at Object.0 (test.js:18)
    at __webpack_require__ (bootstrap c4369025988989c2bc5b:669)
    at bootstrap c4369025988989c2bc5b:715
    at bundle.js:719

Steps to reproduce

Install create-react-app and create a test app

npm i -g create-react-app
create-react-app app
cd app

Put in src/test.js

var hyperdb = require('hyperdb')
var ram = require('random-access-memory')
var db = hyperdb(function (filename) {
     return ram()
   })

db.put('/hello', 'world', function (err) {
  if (err) throw err
  db.get('/hello', function (err, nodes) {
    if (err) throw err
    console.log('/hello --> ' + nodes[0].value)
  })
})

Put in src/index.js

import './test.js'

Start the app

npm start

And open http://localhost:3000/

[emilbayes]

Ah, that's a bug in blake2b-wasm because it expects to be bundled with browserify, and hence have the brfs transform available

[xloem]

I fixed this by calling brfs on all files in advance: https://github.com/fuzzyTew/react-native-hypercore-example/blob/react-native/extrahacksTransformer.js

[peacememories]

Just mentioning this here in case anyone else is looking for this and has trouble finding it: In #96 random-access-idb is mentioned, in case persistent storage in the browser is needed. Seems to work quite well.