Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ready() promises do not resolve in a mobile context when using browserified dat-sdk

See original GitHub issue

The following html works in a desktop browser, but does not on the mobile browsers I tried (Safari, Brave).

The drive.ready() does not resolve, it appears.

<!DOCTYPE html><html>
<head>
  <script src="lib/dat-sdk-bundle.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>

<script>

let hypersdk
let drive
let core

// Runs through initialisation of hyper core and hyperdrive, puts status messages in html doc.
;(async function(){

  await new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve));
  document.getElementById('setup').innerHTML += 'dom loaded<br>'
  hypersdk = await window.datSDK();
  document.getElementById('setup').innerHTML += 'hypersdk loaded<br>'


  drive = await hypersdk.Hyperdrive('drive')
  document.getElementById('drive').innerHTML += 'drive created<br>' //+String(drive.ready()) Note adding this shows that mobile browser recognises ready() as promise obj
  await drive.ready()
  document.getElementById('drive').innerHTML += 'drive ready<br>'
  document.getElementById('drive').innerHTML += 'drive key = ' + drive.key.toString('hex') +'<br>'


  core = await hypersdk.Hypercore('core')
  document.getElementById('core').innerHTML += 'core created<br>' +String(core.ready())
  await core.ready()
  document.getElementById('core').innerHTML += 'core ready<br>'
  document.getElementById('core').innerHTML += 'core key = ' + core.key.toString('hex') +'<br>'

})();


</script>
<!-- main container div -->
<div id="main" style="width:100%;height:auto;display:grid;grid-template: auto auto auto/ auto;background-color:red;">
      <div id="setup" style="width:100%;height:auto;grid-area: 1 / 1 / 2 / 2;;background-color:lavender;">
        INIT:<br>
      </div>
      <div id="drive" style="width:100%;height:auto;grid-area: 2 / 1 / 3 / 2;transition: all 0.5s;background-color:lightgreen;">
        DRIVE:<br>
      </div>
      <div id="core" style="width:100%;height:auto;grid-area: 3 / 1 / 4 / 2;transition: all 0.5s;background-color:yellow;">
        CORE:<br>
      </div>
</div>

</body></html>

Thanks for creating this great library!