ReactNativify | How to use node.js libraries in React Native | Runtime Evironment library
kandi X-RAY | ReactNativify Summary
kandi X-RAY | ReactNativify Summary
How to use node.js libraries in React Native
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Run babel plugin
ReactNativify Key Features
ReactNativify Examples and Code Snippets
Community Discussions
Trending Discussions on ReactNativify
QUESTION
I'm trying to use node modules in my react-native app, and I'm taking the ReactNativify approach here.
I'm all set up now, and I got the crypto package to load in fine. However when I added in eth-lightwallet things have been getting weird.
Every since I added that package in, npm hasn't been installing dependancies of anything. Meaning I've had to add them in manually. And everytime I install a dependency somehow related to eth-lightwallet, that module is uninstalled. Although tedious and annoying, I'm hoping it can shed light onto my current problem.
Right now I'm running into a Can't find variable: Buffer
which is being thrown in a util folder in the standard library. I've taken a look at the code and it's accessing Buffer from a global namespace. Thing is, I'm importing Buffer into the global namespace. Here's a look at my global.js
ANSWER
Answered 2018-Mar-31 at 19:57Coming back to this to leave a solution in case anyone is stuck on this. The solution was to essentially try to shim in different packages in different times to change the load order.
We tried going back to a different version when TYPED_ARRAY_SUPPORT was being treated differently and Buffer was more dependent on it. While on the older version we tried a lot of different things and eventually gave up and backtracked by updating buffer to the most recent version and finally everything worked.
What I mean to say is we're not sure how we fixed it, but it was by randomly changing the load order until we got lucky. Not a good answer, I'm aware, but the best I can provide for this issue.
Here's what our global.js looked like at the end
QUESTION
First, I created a project: react-native init project
, and
when I try to import * as lightwallet from 'eth-lightwallet'
in my react-native project, I get an error see this image
Found a solution at github, but this did not solve the problem for me.
My package.json:
...ANSWER
Answered 2018-Aug-06 at 18:23The problem is that the eth-lightwallet
depends on node core modules that isn't supported by React Native out of the box. The current workaround involves using
rn-nodeify in order to provide shims for React Native to use instead. See this issue for react native and see this open issue from eth-lightwallet.
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
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
...ANSWER
Answered 2018-Apr-12 at 08:12So there are three issues I found
react-native-dgram-shim
needs to be copied asdgram
innode_modules
stream: require.resolve('stream-browserify')
needs to be used inrn-cli.config.js
. The stream module you had used didn't seems to defineStream
object andStream.prototype
access caused an error- The
onvif
module hascam -> device -> cam
, this is handled well inbrowserify
,webpack
andnodejs
. But themetro
packer thatreact-native
seems not like the cyclic imported. It means therequire.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
QUESTION
I want to port a number of packages written for NodeJS to React Native.
For this purpose I created a RN project using the popular Ignite boilerplate, then used the ReactNativify method and shim Node API objects mostly reusing existing browserify shims.
(For details and some useful tips see Can we use nodejs code inside react native application?)
Some Node objects are still replaced with empty mocks after transpilation, such as fs
. Done in .babelrc
as follows:
ANSWER
Answered 2017-Aug-10 at 08:48No. There is no reasonable alternative for Node's fs.readFileSync
.
Though technically it is possible to write a readFileSync
shim that blocks on an asynchronous file operation, it is inadvisable to force synchronous behavior in an asynchronous system (but you may be able to get away with it, when only having few synchronous methods in one-time initialization code).
So option 3 or 4 are the only viable alternatives.
In my case there were too many Node dependencies, so I ditched browserifying / shimming and opted for 4. But ...
That does not mean all is necessarily lost. I am now investigating Compiling NodeJS as native library in Android
(And Realm.io to bridge native NodeJS + React Native in Android fat client app (CQRS-style)).
QUESTION
I have a React Native project (created from the Ignite CLI 2.0.0 default boilerplate) that needs some dependencies on node-based packages.
So, I created a transformers.js
, babel-transform.js
and a rn-cli.js
according to ReactNativify. This is basically equivalent to what's in a normal .babelrc
file and uses babel-plugin-rewrite-require
to swap out Node objects and replace them either with Browserify shims, or empty mocks. So far, so good.
Now the problem is debugging this in Visual Studio Code (1.13.1
). I've had a significant adventure (or horror story, if you will) with RN debugging already, but thought to have it running after downgrading Node to 7.10.1
.
Everything seems to go well, does halt on breakpoints, steps through code, etc., however this is the actual code not the transpiled output with the shims in place! Furthermore breakpoints open in a read-only code window that has no code indentation.
My debug configuration is:
...ANSWER
Answered 2017-Jul-17 at 15:45In my question I bumped into 2 problems.
The first one, tests performing against actual code, appeared to be an issue with Jest. The Jest team stated:
This is the expected behavior. Jest is supposed to run on source files. On any large codebase, generating a bundle before running tests is too slow, so Jest compiles files just-in-time, which makes it fast.
Now this is probably a miscommunication and you can use it with proper babel-jest
configuration to do dynamic transforms, I did not receive further help from the team. So I decided to go for a different test platform (either Mocha, Jasmine and/or Karma).
If you want to try your luck with Jest you can follow up on this thread: https://github.com/facebook/jest/issues/4028
The second problem, code opening in a read-only panel in VS during debugging sessions, is an open issue being processed by Microsoft. You can check progress here: https://github.com/Microsoft/vscode/issues/26782
[Update: I just received further instruction from the Jest team:
@aschrijver the general way Jest handles this is by doing the transpilation itself. So you set up transformers in your config that Jest itself uses to do the transpilation.
https://facebook.github.io/jest/docs/configuration.html#transform-object-string-string
An example config for Typescript is here to give you an idea of what this could look like: https://github.com/kulshekhar/ts-jest
In terms of shims, what I think you might be wanting are actually Jest mocks. A Jest mock can step in instead of an actual module when you import or require it.
]
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install ReactNativify
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page