Ionic-app-scripts: Parse JS SDK doesn't work after rollup

[jgw96]

_From @alamusi on September 30, 2016 4:33_

Short description of the problem:

Parse JS SDK no longer works with RC0

What behavior are you expecting?

Like beta11 and many other beta version, it should work regardless in browsify, webpack, or this new rollup...

Steps to reproduce:

1. ionic start test blank --v2
2. npm install --save parse
3. npm install --save events
4. add preferBuiltins: false into rollup.config -> plugins -> nodeResolve (to satisfy events dependency)
5. ionic serve

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from '../pages/home/home';

import Parse from 'parse';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    console.log('Parse initialize started...',Parse);
    Parse.initialize('MY_APP_DEV');
    Parse.serverURL = 'http://localhost:5000/v1';
    console.log('Parse initialize completed...',Parse);
    console.log('Parse config local success ',Parse.Config.current());
    Parse.Config.get().then(config => {
      console.log('Parse config read success ',config);
    },err=>{
      console.error('Parse config read failed ',err);
    });
    let query = new Parse.Query(Parse.User);
    query.find().then(result=>{
      result.forEach(user=>{
        console.log('user ',user);
      });
    });

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
chrome console indicates Parse initialization is successful. a config call to backend is successful. then it goes wrong when trying to create a new query object.
After stack tracing all the way back to the exception, the issue was pointing to line 35~37 of /Parse/lib/browser/ParseQuery.js. var _ParseObject got undefined, which really shouldn't...

var _ParseObject = require('./ParseObject');

var _ParseObject2 = _interopRequireDefault(_ParseObject);

This also happened for other class/object, such as Parse.User.logIn() call. Some other var ??? = require('./Parse???'); still got "undefined".

Parse initialize started... Object {Analytics: Object, Cloud: Object, CoreManager: Object, FacebookUtils: Object, Op: Object…}
app.component.js:23 Parse initialize completed... Object {Analytics: Object, Cloud: Object, CoreManager: Object, FacebookUtils: Object, Op: Object…}
app.component.js:29 Parse config local success ParseConfig {attributes: Object, _escapedAttributes: Object}
error_handler.js:45 EXCEPTION: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instanceof' is not an objectErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:47 ORIGINAL EXCEPTION: Right-hand side of 'instanceof' is not an objectErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:51 TypeError: Right-hand side of 'instanceof' is not an object
at new ParseQuery (ParseQuery.js:134)
at new MyApp (app.component.js:35)
at DebugAppView._View_MyApp_Host0.createInternal (MyApp_Host.ngfactory.js:16)
at DebugAppView.AppView.create (view.js:125)
at DebugAppView.create (view.js:337)
at ComponentFactory.create (component_factory.js:153)
at ViewContainerRef_.createComponent (view_container_ref.js:114)
at IonicApp.ngOnInit (app-root.js:25)
at DebugAppView._View_IonicApp_Host0.detectChangesInternal (IonicApp_Host.ngfactory.js:29)
at DebugAppView.AppView.detectChanges (view.js:272)ErrorHandler.handleError @ error_handler.js:51(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:54 ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:54(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:55 DebugContext {_view: _View_MyApp_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}ErrorHandler.handleError @ error_handler.js:55(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
app.component.js:20 Parse initialize started... Object {Analytics: Object, Cloud: Object, CoreManager: Object, FacebookUtils: Object, Op: Object…}
app.component.js:23 Parse initialize completed... Object {Analytics: Object, Cloud: Object, CoreManager: Object, FacebookUtils: Object, Op: Object…}
app.component.js:29 Parse config local success ParseConfig {attributes: Object, _escapedAttributes: Object}
error_handler.js:45 EXCEPTION: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instanceof' is not an objectErrorHandler.handleError @ error_handler.js:45next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:47 ORIGINAL EXCEPTION: Right-hand side of 'instanceof' is not an objectErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:50 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:50next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:51 TypeError: Right-hand side of 'instanceof' is not an object
at new ParseQuery (ParseQuery.js:134)
at new MyApp (app.component.js:35)
at DebugAppView._View_MyApp_Host0.createInternal (MyApp_Host.ngfactory.js:16)
at DebugAppView.AppView.create (view.js:125)
at DebugAppView.create (view.js:337)
at ComponentFactory.create (component_factory.js:153)
at ViewContainerRef_.createComponent (view_container_ref.js:114)
at IonicApp.ngOnInit (app-root.js:25)
at DebugAppView._View_IonicApp_Host0.detectChangesInternal (IonicApp_Host.ngfactory.js:29)
at DebugAppView.AppView.detectChanges (view.js:272)ErrorHandler.handleError @ error_handler.js:51next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:54 ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:54next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:55 DebugContext {_view: _View_MyApp_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}ErrorHandler.handleError @ error_handler.js:55next @ application_ref.js:272EventEmitter.subscribe.schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:64t.handleError @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
polyfills.js:3 ViewWrappedError {_nativeError: Error: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instan…, originalError: TypeError: Right-hand side of 'instanceof' is not an object
at new ParseQuery (http://localhost:…, context: DebugContext}o @ polyfills.js:3i @ polyfills.js:3
polyfills.js:3 Unhandled Promise rejection: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instanceof' is not an object ; Zone: ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instan…, originalError: TypeError: Right-hand side of 'instanceof' is not an object
at new ParseQuery (http://localhost:…, context: DebugContext} TypeError: Right-hand side of 'instanceof' is not an object
at new ParseQuery (http://localhost:8100/build/main.js:80190:28)
at new MyApp (http://localhost:8100/build/main.js:89882:21)
at DebugAppView._View_MyApp_Host0.createInternal (MyApp_Host.ngfactory.js:16:21)
at DebugAppView.AppView.create (http://localhost:8100/build/main.js:10257:21)
at DebugAppView.create (http://localhost:8100/build/main.js:10469:44)
at ComponentFactory.create (http://localhost:8100/build/main.js:6050:36)
at ViewContainerRef_.createComponent (http://localhost:8100/build/main.js:5361:45)
at IonicApp.ngOnInit (http://localhost:8100/build/main.js:48112:43)
at DebugAppView._View_IonicApp_Host0.detectChangesInternal (IonicApp_Host.ngfactory.js:29:77)
at DebugAppView.AppView.detectChanges (http://localhost:8100/build/main.js:10404:14)o @ polyfills.js:3r @ polyfills.js:3i @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Error: Error in ./MyApp class MyApp_Host - inline template:0:0 caused by: Right-hand side of 'instanceof' is not an object(…)o @ polyfills.js:3r @ polyfills.js:3i @ polyfills.js:3
app.component.js:31 Parse config read success ParseConfig {attributes: Object, _escapedAttributes: Object}
app.component.js:31 Parse config read success ParseConfig {attributes: Object, _escapedAttributes: Object}

Which Ionic Version? 1.x or 2.x
2.0RC0

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.3.1

Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.6.0
Xcode version: Xcode 7.3.1 Build version 7D1014

_Copied from original issue: driftyco/ionic#8331_

[jgw96]

_From @jpmsegurado on September 30, 2016 19:47_

Same issue here :(

[jgw96]

_From @alamusi on October 3, 2016 18:6_

This issue may not get resolved soon... My stone age style workaround... unfortunately, it defeats the purpose of moduling, packaging, encapsulation and all the good things along with it. But this seems the only functional approach for the time being.

1. add parse.min.js to src/assets
2. add js into src/index.html. i.e. <script src="assets/parse.min.js"></script>
3. comment out all Parse import in all services. i.e. // import {Parse} from 'parse';
4. no change to code (as Parse becomes a Global library). i.e. Parse.initialize(...);

If anyone comes the workaround with ionic-app-scripts for bundling the parse JS SDK, that would be really appreciated!

[danbucholtz]

All,

We've posted some docs on the subject. Note: They match a version of @ionic/app-scripts that will be dropped in the next day or so. 95% of the concepts still apply.

http://ionicframework.com/docs/v2/resources/third-party-libs/
http://ionicframework.com/docs/v2/resources/app-scripts/

Here's an example with AngularFire2.
Here is a project I implemented that has every library in it that Ionic users have reported trouble with. Most of the libraries worked, but a couple did not. Here is the summary of the findings.

Please let me know how everything goes. Since we shipped the documentation, we are going to close this issue.

Thanks,
Dan

[cleever]

Thank you @danbucholtz for the help.

Any ideas about "Super expression must either be null or a function, not undefined" exception" on Parse imports?

The problem occurs when LiveQuerySubscription.js Parse file is read.

Seems to be related:
https://github.com/rollup/rollup/issues/594

[danbucholtz]

I'm honestly not sure. The best bet is to just include the script using a <script> tag. See the documentation on how to do that here. Search for Script Tag Include.

Thanks,
Dan

[cleever]

It's fine. Thanks

Should I create a lib folder inside src/ and copy the specific lib from node_modules/ folder?
What is the best practice in this case?

[danbucholtz]

@cleever,

Make a scripts directory in assets is probably the best bet. That will automatically be copied and have a nice relative path from index.html (assets/scripts/parse.js).

Thanks,
Dan

[cleever]

@danbucholtz

I have a similar issue of this: https://github.com/driftyco/ionic-app-scripts/issues/184

With Parse Library, with app-scripts v0.0.31 and up;

At v0.0.30 the Script method to include thirdy party library works very well,

After v.0.0.31 until v0.0.36 I receive a lot of errors like:
"Cannot find namespace 'Parse'."

Windows 10 Machine too.