Parse can't find localStorage variable in React Native - javascript

I have a React Native app that works fine with the Chrome debugger open. Once I disable it though, I keep getting the following error whenever I try to make any Parse calls:
The call stack leads back to the following code attempting to log a user in:
Parse.User.logIn(
email,
password,
{
success: function(res) {
console.log('success');
},
error: function(error) {
console.log(error.code + ' ' + error.message);
}
}
);
I've tried removing the console statements, in case the error had to do with the console not being available, but no avail. This happens with other Parse calls, and always has to do with the missing localStorage variable.
Thanks in advance for any help!
UPDATE:
Looks like there is a similar issue with Firebase. https://groups.google.com/forum/#!topic/firebase-talk/Y_usPRhOIYA
They mention that the problem has to do with there not being a polyfill for localStorage.

The answers above are technically right, but Parse has provided a solution that doesn't require a polyfil or downgrading. This was due to my perpetual lack of reading. I found this on the Parse React docs:
As of version 1.6, the Parse JS SDK has a different build for React
Native. If you're using Parse+React on React Native, you'll need to
require the 'parse-react/react-native' package instead.
For example:
// For React Native apps
var React = require('react-native');
var Parse = require('parse/react-native');
var ParseReact = require('parse-react/react-native');
Sorry for not mentioning I was using Parse React as well. I thought the problem was just with Parse, as I hadn't begun to add data subscriptions via Parse React.

That's correct (with polyfill). There is no localStorage added as polyfill nor the Apple's embedded javascriptCore engine has localStorage implemented (where Chrome's v8 has it implemented of course). Main reason is that localStorage is synchronous and React should only work with asynchronous operations by design.
There is a nice solution/mini-polyfill that replaces localstorage with an in-memory version: https://gist.github.com/juliocesar/926500 . That should let parse use localstorage for cache (that's the main purpose they are using it now I believe). The data will not be persistently stored between application executions. I am not sure if you can disable localstorage use by Parse, but that's another possibility to explore.

I downgraded to 1.5.0 and working now.
"dependencies": {
"parse": "1.5.0",

I do not think that even being forced to use Parse+React is a good enough solution. For example I am building my app with Redux, it makes a lot more sense for me to keep all of my API Requests inside my action creators.
In 1.6.0 Parse is forcing us to use Local Storage, when React Native does not support it. React Native does however support AsyncStorage.
For me I just downgraded to 1.5, hopefully they will give an option to use Local Storage or Async Storage in the future.
So people that stumble upon this and would not like to be forced to use Parse+React your answer is to downgrade to 1.5, in your package.json change your dependencies to "parse": "1.5.0".

This problem can easily be fixed by:
npm install localstorage-polyfill
and then in App.js
import 'localstorage-polyfill';
EDIT: this error potentially means you have outdated or incompatible library dependencies. You can try to reinstall with rm -rf node_modules; npm install

Related

How to initialize a library in react-native

I'm trying to work with this react-native library, and in the documentation it says this:
Initialize Library
Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your public key as follows:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
How do I do this, without getting null object is not a function.
In my app.js I tried it with useEffect, tried with componentwillmount , tried several ways, same error.
I feel I'm doing it wrongly.
Can someone tell how to initialize a library properly in react native.
Thanks :)
This is most likely happening because you haven't linked the native modules properly. That's expected as you mentioned you're using Expo, which doesn't allow you to add custom native code. If you want to use this library, you'll have to eject from Expo. See the docs.

How to handle native exception in react-native

I want to handle native exception in react-native application. I'm currently using the react-native-exception-handler module to do this. All things are working fine except callback. If you read about given module api you will find setNativeExceptionHandler() method having three parameters i.e., exceptionhandler, forceAppQuit and executeDefaultHandler.
Here is usage about the method:-
// ADVANCED use case:
const exceptionhandler = exceptionString => {
// this block not executing
};
setNativeExceptionHandler(
exceptionhandler,
false
);
Any help would be appreciated.
I think that the issue is that you are not using it in bundle mode.
From the docs:
NOTE: setNativeExceptionHandler only works in bundled mode - it will show the red screen when applied to dev mode.
So you should try to build app and then try it.
Also be aware that some actions are not allowed when native exception is happening for ex. you can't use alert
From docs:
NOTE: alert or showing any UI change via JS WILL NOT WORK in case of NATIVE ERRORS.

Azure service bus not receiving messages

I'm using Azure service bus to send messages across containers in my K8s setup. Implementation of service that receives message is done in Node.js.From the doc page, here is the code I'm using to receive the messages.
serviceBusService.receiveQueueMessage('feedback', function(error, receivedMessage) {
if (!error) {
// Message received and deleted
console.log(receivedMessage);
//..
}
});
Everything works as expected for the first time but the messages are not received for the second time. It works as expected when the code snippet is kept inside the setInterval block. Which seems not the intended way of doing this.
Any ideas what could be wrong?
I have not used the js library for ServiceBus client, but the .NET library that has it seems similar methods. So if the js versjon works the same way, so then it receives only one message and you have to continue yourself.
In .Net library there are generally two ways:
You write your own while loop with whatever you think necessary
You use RegisterMessageHandler that seems to be absent from js library
The option number 2 generally does the same and starts the while loop inside the pump so that you don't have to implement it yourself.
You can take a look here on how the while loop is implemented and do something similar to it in js.
Like Mikhail Shilkov has mentioned previously in the comments, I suspect it only receives one message and I'd also recommend using the AMQP libraries.
I know this is a late reply, but just in case someone is running into issues, refer to the links below.
Version 7.0.0 of #azure/service-bus(based on AMQP) has been recently published.
#azure/service-bus - 7.0.0
Samples for 7.0.0
Guide to migrate from #azure/service-bus v1 to v7

FormData.entries() in Internet Explorer 11?

As found on the official documentation IE11 does not support FormData at all or at least not much enough I need to.
Inside my code I have to loop through the entries of an FormData element. For this task I use the entries() function which is not working on IE giving me the error
Object doesn't support property or method 'entries'
I already added https://github.com/jimmywarting/FormData via npm to my project and added it to my entry in webpack.config.js which then looked something like this.
const webpack = require("webpack");
const path = require("path");
module.exports = {
entry: {
app: ["babel-polyfill", "formdata-polyfill", "whatwg-fetch", "./Scripts/Modules/index.ts"]
},
}
In the console I can see that formdata.min.js is loaded. As the error still occurs it seems like it does not use the polyfill as it should. It still uses the default one which fails.
How can I tell my TypeScript code to use the polyfill-version instead of the browser's default implementation as the package does not provied any d.ts files?
Is this even possible? If not - what are possible workarounds for such a scenario?
This is what the FormData object is looking like in the dev-tools:
which only has append as method defined
Not sure if it may helps you but I got this issue today and it seems that the version of the polyfill provided via NPM does not completely override the FormData object, so is not suitable to IE11 or Edge.
I found switching to the V3 of the library fixed that. In order to do that I got the content of the FormData.js file from the github repository and added it as a component in my own custom JavaScript code.
I use WebPack to, got some other issues with IE11, still investigating.
Let me know how it goes by including the content directly instead of getting it from NPM.

Foundation Sites (6) javascript order

I am utterly confused as how to insert individual foundation javascript. it always seem to break my code. for example I need to use the dropdown menu js. in the documentation it state
Initializing
The file foundation.dropdownMenu.js must be included in your JavaScript to use this plugin,
along with foundation.core.js.
This plugin also requires these utility libraries:
foundation.util.keyboard.js
foundation.util.box.js
foundation.util.nest.js
this seem simple enough so I did the following in this order
bower_components/foundation-sites/js/foundation.core.js //check
bower_components/foundation-sites/js/foundation.util.mediaQuery.js
bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js
bower_components/foundation-sites/js/foundation.util.keyboard.js //check
bower_components/foundation-sites/js/foundation.util.box.js //check
bower_components/foundation-sites/js/foundation.util.nest.js //check
bower_components/foundation-sites/js/foundation.dropdown.js
bower_components/foundation-sites/js/foundation.dropdownMenu.js //check
bower_components/foundation-sites/js/foundation.equalizer.js
I follow what logical for me core 1st than util than plugin
yet it told me foundation.util.nest.js:6 Uncaught SyntaxError: Unexpected token =
if I put all foundation.min.js file the error go away, so I know it must be a dependency is missing or the order is not correct
is there any resource out there that is clear on the dependency of foundation js? instead everytime I have to trail and error it.
I'm having the same issue on my end. I am using Foundation as a GIT subtree in my project and actually have used this on a site I made just last week.
It seems that the problem is a newer version of function parameter declarations. In the code I had working, v6.1.2, the code in foundation.util.nest.js is:
Foundation.Nest = {
Feather: function(menu, type){
menu.attr('role', 'menubar');
type = type || 'zf';
versus the code in the newest version 6.2.0 which is:
const Nest = {
Feather(menu, type = 'zf') {
menu.attr('role', 'menubar');
It's that default/fallback declaration of "type" that seems to ruin everything. I look forward to a fix myself.
According to this link, my current version of Chrome (48) doesn't yet support default function parameters.
As of Foundation v6.2.0 the JavaScript codebase has been updated to ES6.
https://github.com/zurb/foundation-sites/releases
You'll need to add Babel to your build process to compile the ES6 code.
They have supplied a tutorial for this here:
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2
Hope this helps.

Categories

Resources