Home » Reactjs » Parse can't find localStorage variable in React Native

Parse can't find localStorage variable in React Native

Posted by: admin January 29, 2018 Leave a comment

Questions:

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:

React Native and Parse error

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.

Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

I downgraded to 1.5.0 and working now.

"dependencies": {
  "parse": "1.5.0",

Questions:
Answers:

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".