Problem using dat-fetch in Firefox with Browserify

[dgrmunch]

Trying to use dat-fetch in client-side JS

This is my hyper.js file:

async function fetchFunction(){
    const fetch = require('dat-fetch')()
    const someURL = `hyper://blog.mauve.moe`
    const response = await fetch(`${someURL}/index.json`)
    const json = await response.json()
    console.log(json)
}

fetchFunction()

Executing dat-fetch

I execute these commands on the shell to install the required dependencies and check that the script works:

npm install --save dat-fetch
npm install --save dat-sdk@^2.0.0 
node hyper.js 

And the script properly runs:

{
  title: 'RangerMauve - Blog',
  description: 'My Blog - Talking about Dat stuff',
  type: [ 'website' ],
  fallback_page: '/index.html'
}

Creating Browserify bundle

If I try to create the bundle with:

 browserify hyper.js -o bundle.js

I get an error:

browserify hyper.js -o bundle.js
Error: Cannot find module 'babelify' from '<my_path>/BrowserifyTest/node_modules/dat-sdk'
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:115:35
    at processDirs (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:268:39)
    at isdir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:275:32)
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:25:69
    at FSReqCallback.oncomplete (fs.js:176:21)

So I proceed installing the specified "babilify" module:

npm install --save babelify

I get a warning: npm WARN babelify@10.0.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself. so I proceed:

npm install --save @babel/core@^7.0.0

I finally get the bundle and include it as a source in an index.html file:

<script src="bundle.js"></script>

When I open the file in a browser and I check the console, rather than getting the JSON from the hyperdrive I get:

Uncaught (in promise) Error: No native build was found for platform=browser arch=javascript runtime=node abi=undefined uv= libc=glibc node=undefined
    loaded from: /node_modules/sodium-native

Can somebody reproduce the error and give me some tips about what should be done in order to execute the dat-fetch API as part of a browser-first javascript proyect?

[RangerMauve]

Hmm, something is up.

Try adding this babel config to your project: https://github.com/datproject/sdk/blob/master/babel.config.json

See if that helps make it compile properly. 😁

[RangerMauve]

Actually, that might not be good either...

Try cloning dat-sdk, building a bundle there, and importing that bundle for now.

I'll need to work on making the workflow better there once I have spare cycles. (probably not for a few weeks at least)

[dgrmunch]

Yeap, you are right. The babel.config did not work either :D No rush. Just let me know whenever you have time to check it ;) In those weeks I can just play with the dat-sdk. I had fun with your workshop at the 2020 Dat Conf :)

[RangerMauve]

Gonna close this for now and track the issue in the dat-sdk repo. 😁