React Native Support?

[freddieerg]

Is this module supported by React Native? I've been trying to get it to run all day via the following steps:

~ npm install

Then in App.js I do my React imports followed by the webtorrent import:

import WebTorrent from 'webtorrent/webtorrent.min'

As soon as I run it over the debugger I get this error:

Cannot create URL for blob!

I know this isn't much information to go on but I honestly have no idea why this isn't working. It should be a simple import?

[feross]

Are you saying it crashes with that error and all you did was import WebTorrent? You didn't write any other code?

[freddieerg]

Yep, completely fresh install using OS X, WebStorm, Node 10.16.0. installed using:

npx --package react-native-cli react-native

Then using Yarn I install the WebTorrent package (I've tried installing with both Yarn and npm):

yarn add webtorrent

Then in my App.js I import after my ReactNative imports:

import WebTorrent from 'webtorrent/webtorrent.min'

There's absolutely no other code related to webtorrent in my project, just a very simple hello world. I'm then running using AndroidTV 9.0 emulator.

Here's the stack trace if it's any help:
https://i.imgur.com/hpS88yT.png

Sorry if I've not explained this well or if there's something obvious here I've missed. I'm a CS student trying to get to grips with React Native. Any help is greatly appreciated!

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import WebTorrent from 'webtorrent/webtorrent.min';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

UPDATE
Ok, expanded the JS to take a look under the hood. The error seems to be stemming from the window object. Is there not a polyfill for this already in RN?

[feross]

I believe this issue was caused by my updating the simple-sha1 package to use Web Workers to compute SHA1 hashes when in the browser environment. Since you're using the minified bundle (webtorrent.min.js) it's assumed to be a browser environment. I just updated the package to fallback gracefully in an environment without a window object.

Can you update the version of webtorrent to 0.107.13 and try your code again?

[freddieerg]

Still getting the same error on 0.107.13. Stack trace still pointing to this same block in the expanded version of webtorrent.min.js line 3752:

if (t.bare) return c;
    var u = (window.URL || window.webkitURL || window.mozURL || 
    window.msURL).createObjectURL(c),
    d = new window.Worker(u);
    return d.objectURL = u, d

[feross]

Oops, the simple-sha1 didn't get updated. Try it once more, please. Version 0.107.14.

[freddieerg]

This is now throwing:

"Secure random number generation is not supported by this browser. Use Chrome, Firefox or Internet Explorer 11"

[feross]

Looks like you might need to include https://github.com/LinusU/react-native-webcrypto to get the subtle crypto API to work in react native?

[freddieerg]

I've added react-native-webcrypto to the project and have linked and imported it right before WebTorrent:

import 'react-native-webcrypto'
import WebTorrent from 'webtorrent/webtorrent.min' 

But I'm still getting the same error. Like I said, I'm still trying to build my experience in React Native so I'm not sure if extra steps are needed to get webtorrent.min.js to use the react-native-webcrypto subtle crypto api instead of the broken or absent subtle crypto api?

Tomorrow I’m going to look at using rn-nodeify‘s crypto package which I think should work but it seems like serious overkill just to use the subtle crypto API but I’m willing to try anything at this point!

Thank you so much for all the help you've provided so far and I really, really hope this will be the last hurdle to overcome and I can get on with my project :)

[feross]

Good luck figuring it out. If any React Native users want to chime in, please go for it.

[freddieerg]

Errors relating to crypto (specifically, getRandomValues) can be fixed using this package:
https://www.npmjs.com/package/react-native-get-random-values

There is now an exception related to this on line 6151:
const n = t.port;
Something to do with the port being unspecified or something?

Let me know if there is any other information I can provide.!

[KayleePop]

You'd probably have an easier time figuring this out if you used a debug build instead of the minified one.

$ npm run build-debug in the cloned webtorrent repo after running $ npm install

Then the debug build will be at webtorrent/webtorrent.debug.js

[KayleePop]

Not sure, but this might help you too https://github.com/tradle/rn-nodeify