Bundler causes serious weird/crashing issues with ios ng apps with several plugins.

[NathanaelA]

I have traced down a couple ios issues caused by webpack when running with multiple plugins:

1. __extends will run on NSObject code even though, I believe you hijack it normally inside the
   https://github.com/NativeScript/ios-runtime/blob/b7b8d69c1857d6d6293b1e33c60ac6980a4161e3/src/NativeScript/ObjC/Inheritance/ObjCTypeScriptExtend.mm#L49 -- I don't know if this is an issue for sure; but in the webpack'd code -- when this runs, it attempts to run the __() which set the this.constructor (this.constructor = d;) which when the code is set to "use strict;" will cause it to crash. This is NOT an issue if the file isn't web packed. (In fact in my tests, the normal JS __extends --- __() constructor code does not appear to be ran against a NSObject at all); however in a webpacked version the code is ran which is what causes the failure.
2. the Constructor itself https://github.com/NativeScript/ios-runtime/blob/b7b8d69c1857d6d6293b1e33c60ac6980a4161e3/src/NativeScript/ObjC/Inheritance/ObjCTypeScriptExtend.mm#L34 is supposed to be hijacked by this regex; but the regex breaks on webpacked code, and so the _super.apply is ran. A NSObject based object in NS 2.1 doesn't have a .apply() function; which will cause the app to crash when it attempts to run it.
3. WebPack can't seem to understand the radlistview listview from ng2 code, it can't seem to resolve the file/folder properly. (Renaming listview.ios.js to listview.js inside the rad listview folder allows it to works)
4. Using a NPM link on the nativescript-angular folder will cause serious webpack pathing issues -- it appears to be trying to go up to the parent folder of where the final symlink is at; rather than the parent folder inside the node_modules (finally manually just deleted the link, and copied the rc4 version folder manually into the node_modules folder)

[jasssonpet]

@NathanaelA

Regarding the first two issues, are you using the UglifyJS plugin or is this behavior so in the default config.

[NathanaelA]

I just do a
tns install webpack
then
tns run ios --bundle --emulator

As far as I know no uglifyJS is being activated;

The webpack config file:

var bundler = require("nativescript-dev-webpack");

module.exports = bundler.getConfig({
    // TODO: add project-specific webpack settings here...
});

[NathanWalker]

I am currently blocked by this issue in a bad way :( I have an app I would like to deploy to app store but cannot bundle it properly due to these issues. The unbundled app is 136 Mb so it would be unacceptable to post such a large app which I want to be a great production example of a nativescript-angular app.

[jasssonpet]

Does the first iOS extends issue happen with a blank application (tns create MyApp --ng)? I've tried with both a blank app and the ng-sapmle and can't seem to reproduce it.

If you could send a sample or just the extend snippet that's happening I'll be more than interested to investigate it further.

[NathanaelA]

Notice the title, with plugins. :-) That is probably the missing factor.

I have figured a way around all 4 issues (all though all 4 issues are still valid issues). They are no longer blocking for me (or Walker). The first two issues are causes by several of the plugins having their own __extends function. This version of the __extends is then inlined by webpack and then space/tab padded which makes it change the "fingerprint" of the __extends function causing it to fail the built in ios runtime __extends fingerprint regex check.

My solution was to add a webpack plugin that strips all __extends from the source as it packs the bundle. This seems to be the simplest solution, and it appears that it worked for me, as I was able to get quite a ways into the app before it crashed again. (See #10 )

This issue will probably hit anyone using any number of popular plugins as a large chunk of the plugins that ship have the built in __extends function in final js file. And when webpack bundles them up; it will crash with all sorts of interesting fireworks. :-)

[jasssonpet]

Can you give an example of such plugin, I want to try it out.

[NathanaelA]

nativescript-cardview, nativescript-ezaudio, nativescript-gif, nativescript-intl, nativescript-spotify
are some of them that have their own __extends. Please note, NS-spotify is the one that I was seeing the issue; but that might be just because ns-spotify was the last of the plugins to load that had an __extend (so it overwrites the global one)...

[jasssonpet]

It shouldn't rewrite the global __extends function, because it's marked readonly but I'll take a look.

[NathanaelA]

Well, let me restate it; I think that this is the FIRST one being defined; because it was where the crash was always occurring. The line number was always in the ns-spotify/src/ios/notification.js __extends, in side the __() { this.constructor = d; }

It took me a little while to figure out what was causing the error with TypeError read only property being set. It ended up being the actual NSObject from the TNSSpotifyNotificationObserver in this file.

Once I eliminated the "use strict"; at the top; it was fine because then it would "ignore" the read only type error on the attempt to re-assign; then I got the error with the _super.apply constructor because it was being fired on a NSObject (and NSObject's don't apparently have an "apply" function).

[leocaseiro]

I have an issue which is might be related to this.

I'm using Angular and every time that I try to use registerElement, it seems not working.

I'm new to webpack still, but I can tell only when I compile with --bundle I'm getting the issue:

ORIGINAL EXCEPTION: TypeError: Could not load view for: PullToRefresh.TypeError: Attempted to assign to readonly property.

The plugin I'm testing now is nativescript-pulltorefresh.

registerElement("PullToRefresh", () => require("nativescript-pulltorefresh").PullToRefresh);

I've tried using globals and global.require as well, but doesn't give me bugs, as well as not working.

UPDATE
I removed strict mode as well, so now I'm getting the error:

Error: This value is not a native object.

[leocaseiro]

Thanks @NathanaelA, I fixed it removing the __extend function and removing the 'use strict' as well, so I believe if we request to all {N} plugin developers to remove the __extends() function, it'll work fine:

http://stackoverflow.com/questions/36556772/webpack-and-typescript-extends

Perhaps @NathanWalker would like to add this *.ts setup to the nativescript-ng2-plugin-seed