Porting nodejs module to React Native: Object.prototype undefined

Question

Here's my source tree at the exact moment of the problem:

https://github.com/lucaszanella/jscam/tree/cf29b3cc90df7c5c7bb2d27c2205264d52b0715d/src/jscam

I believe npm install, npm start and npm run android will make it launch (note that onvif is not installed from npm but cloned in npm post-install script and then installed, but it gets installed in node_modules with a symlink to the place where it cloned. I even tried to put everything in node_modules just in case, but the error persists). Also don't mind the extra docker things I have in the folder

Anyways, the problem is:

I'm trying to use the nodejs module onvif in React Native, so I used this technique to translate the require methods using babel and installed browserfy modules to implement the core nodejs modules. I've tested with simple examples like crypto and it worked. However, when I try to simply import the onvif module I get this:

Here's device.js line 30, looks like Cam is undefined here

When I import the onvif.js which imports cam.js, nothing happens. But then it imports device.js which seems to be getting undefined when importing cam.js again

I also tried this method which seems to avoid all the babel translation but surprisingly the problem persists.

UPDATE:

Here's the new source tree: https://github.com/lucaszanella/jscam/tree/98b714219ed25b9d91ea3af275177f66fdb74fa2/src/jscam

I'm now using extraNodeModules which is the official way to do. You can see my dependencies here: https://github.com/lucaszanella/jscam/blob/98b714219ed25b9d91ea3af275177f66fdb74fa2/src/jscam/rn-cli.config.js

Now the error changed:

It's on this line: https://github.com/isaacs/sax-js/blob/d65e3bb5049893aaab4aba05198b9cd335b5a1ad/lib/sax.js#L222

It still looks like the same type of error though

Update: if you get dgram not found, try

npm install lucaszanella/react-native-dgram-shim

It is already in package.json, it should be installed but someone complained it didn't

Answer 1

So there are three issues I found

• react-native-dgram-shim needs to be copied as dgram in node_modules
• stream: require.resolve('stream-browserify') needs to be used in rn-cli.config.js. The stream module you had used didn't seems to define Stream object and Stream.prototype access caused an error
• The onvif module has cam -> device -> cam, this is handled well in browserify, webpack and nodejs. But the metro packer that react-native seems not like the cyclic imported. It means the require.js of the same needs to be fixed or the cyclic dependency needs to be removed

So you either make a fix to the require.js polyfill at jscam/src/jscam/node_modules/metro/src/lib/polyfills/require.js or you change your files to remove cyclic imports by passing the required objects like below

require('./device' )  (Cam);

And update device.js like below

module.exports = (Cam) => {

And remove the

const Cam = require('./cam').Cam

This will make sure the cyclic dependency is removed and the module should then load fine

PS: On a side note, that is why its said perseverance wins. This was your 3rd bounty attempt and I watched the question go 2 last time in front of me. But your 3rd attempt motivated me to have a dive in and see if I could help you out.