Problem using localstorage with Parse SDK

[KirilOkun]

We're trying to get Parse JS SDK to work with NS-Angular app as described here. This solution uses events and nativescript-local storage.

$ cd myApp
$ npm install parse
$ npm install events
$ npm install nativescript-localstorage

But even though it works for the NS-Vue app as described it crashes on NS-Angular with the error below. We're not sure why this is happening. Is there extra setup required for NS-Ng apps to ignore calling browser? Hoping for suggestions or pointers. Thanks in advance.

We're on the latest versions of NS, NG, and TS

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x1016c424e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10171008c -[TNSRuntime executeModule:referredBy:]
3   0x101028243 main
4   0x104ff4541 start
5   0x1
JavaScript stack trace:
../node_modules/pbkdf2/lib/default-encoding.js(file:///node_modules/pbkdf2/lib/default-encoding.js:3:11)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/pbkdf2/lib/sync.js(file:///node_modules/pbkdf2/lib/sync.js:14:30)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/pbkdf2/index.js(file:///node_modules/pbkdf2/index.js:24:31)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/crypto-browserify/index.js(file:///node_modules/crypto-browserify/index.js:14:16)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/uuid/lib/rng.js(file:///node_modules/uuid/lib/rng.js:4:21)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/uuid/v4.js(file:///node_modules/uuid/v4.js:1:18)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/parse/lib/browser/Anon<…>
JavaScript error:
file:///node_modules/pbkdf2/lib/default-encoding.js:3:11: JS ERROR TypeError: undefined is not an object (evaluating ‘global.process.browser’)
(CoreFoundation) *** Terminating app due to uncaught exception ’NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating ‘global.process.browser’)
at
../node_modules/pbkdf2/lib/default-encoding.js(file:///node_modules/pbkdf2/lib/default-encoding.js:3:11)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/pbkdf2/lib/sync.js(file:///node_modules/pbkdf2/lib/sync.js:14:30)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/pbkdf2/index.js(file:///node_modules/pbkdf2/index.js:24:31)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/crypto-browserify/index.js(file:///node_modules/crypto-browserify/index.js:14:16)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/uuid/lib/rng.js(file:///node_modules/uuid/lib/rng.js:4:21)
at __webpack_require__(file:///src/webpack/bootstrap:750:0)
at fn(file:///src/webpack/bootstrap:120:0)
at ../node_modules/uuid/v4.<…>
NativeScript caught signal 6.
Native Stack:
1   0x10170eba1 sig_handler(int)
2   0x105357b5d _sigtramp
3   0xffff
4   0x1050da01d abort
5   0x104e719d1 __cxa_bad_cast
6   0x104e71b6f default_unexpected_handler()
7   0x103896e2d _objc_terminate()
8   0x104e7da2e std::__terminate(void (*)())
9   0x104e7d4eb __cxa_get_exception_ptr
10  0x104e7d4b2 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*)
11  0x103896bfa _objc_exception_destructor(void*)
12  0x1016c46cf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13  0x10171008c -[TNSRuntime executeModule:referredBy:]
14  0x101028243 main
15  0x104ff4541 start
16  0x1
JS Stack:

[NathanaelA]

The above issue isn't from localstorage; but the issue should be easily fixed by either:

if (global.process) { 
  global.process.browser = false;
} else {
   global.process = {browser: false};
}

In your bootstrap/main/app file...

Or setting it to true. Hard to know which is the better value for pdkdf2 without looking at the code...

Basically the:
pbkdf2/lib/default-encoding.js:
has code in it that ASSUMES that the global.process object exists. So it fails when it tries to do something with an if statement against global.process.browser

[KirilOkun]

Thanks Nathanael.

You're absolutely right. This wasn't Localstorage issue. So your suggestion is that much more appreciated. Since we're using Typescript adding process.browser was not possible. The alternative solution was the following:

if (!global.process) {
   Object.assign(global, {
       process: {
           browser: false,
           env: {}
       }
   });
}

And we put it in the main.tns.ts. Unfortunately for some strange reason Parse code was being executed before main.tns.ts was called so we had to put the code above into Parse file right above where the process.browser check was happening. That fixed the issue. Looks like Parse folks got some work to do.
Thanks again.