Parse can't find localStorage variable in React Native

Question

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.

Pulliam

Answer 1

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.

Pulliam

Using Parse v1.6.4 and React-Native v2.14.3. When I try the requires as shown here I get the following error: Requiring unknown module "parse-react/react-native". If you are sure the module is there, try restarting the packager. As with the original poster, using the original includes: var Parse = require('parse').Parse; var ParseReact = require('parse-react'); still works fine if I'm in debug mode, and in the iOS emulator, but in the Android emulator and on actual devices that code always complains about localStorage not being found. – Cavender

Answer 2

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.

Mozellemozes

Answer 3

I downgraded to 1.5.0 and working now.

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

Apophyllite

Answer 4

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

Storz

Answer 5

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

Gear