Runtime crash when extending application with webpack

[petekanev]

From @code0wl on February 2, 2017 21:38

Running the application with bundle enabled is causing the following runtime error.
How to reproduce:

• Create an app using angular native
• Extend the Application object as to documentation with custom name Link to docs
• Run application using the android platform
• Expect application to work correctly
• Run application using the --bundle cli flag
• Expect application to display errors and crash

The following error occurs

com.tns.Runtime.createJSInstance(Runtime.java:695)

This categorizes the potential issue as a Runtime error

Application works fine with

 tns run android

Application breaks with tns run android --bundle

tns run android --bundle

My current stack

• CLI: 2.5.0
• Cross-platform modules: 2.4.0
• Android runtime: 2.4.1

Error can be reproduced with a new clean Angular Native project and running with the bundle flag

Copied from original issue: NativeScript/android#701

[code0wl]

@Pip3r4o Thanks for moving it to the correct channel, highly appreciated.

[sis0k0]

Hi @code0wl,

Can you provide a small app, reproducing the problem? Also do you use webpack with the uglify plugin or not?

[code0wl]

@sis0k0 I will make a demo project mimicking the the same issue we are having with bundling for you

[code0wl]

@sis0k0 You may find the project at the following location. Let me know if you prefer it in private mode where I can send you an invite instead
https://github.com/code0wl/webpack-example-nativescript-error

[sis0k0]

Hey @code0wl,

The problem is that the file application.android.js doesn't get into the bundle. That's because we never require it anywhere and webpack just doesn't include it. To solve that we simply need to require the file somewhere in our app. A proper place to do that is app/vendor-platform.android.js (note that this file is created for you by the nativescript-webpack plugin). Let us know if that resolves your problem!

[code0wl]

Awesome suggestion, @sis0k0 I have solved it by ignoring the file from the webpack configuration. But including it in vendor seems also like a viable solution. We can mark this as closed as far as I know.

[sis0k0]

Great! I'm glad that solved the problem.

[jibon57]

@sis0k0 Will you please share complete code? I tried like this in vendor-platform.android.ts

require("./activity.android.js");
require("./application.android.js");

or

import * as activity from "./activity.android";
import * as app from "./application.android";

But nothing is working ... After complied vendor-platform.android.js it looks like this:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("application");
require("./activity.android.js");
require("./application.android.js");
if (!global["__snapshot"]) {
    // In case snapshot generation is enabled these modules will get into the bundle
    // but will not be required/evaluated.
    // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file.
    // This way, they will be evaluated on app start as early as possible.
    require("ui/frame");
    require("ui/frame/activity");
}

In where I am doing mistake?

[NickIliev]

@jibon57 try to require the application file like done here for an extended activity file

[jibon57]

@NickIliev Thanks for your suggestion. That didn't work for me but this one worked: #235 (comment)
webpack.config.js file

entry: {
            bundle: entryPath,
			MainActivity: './MainActivity',
			MainApplication: './MainApplication'
        },

But now I am getting this error:

com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: Cannot read property 'create' of undefined
System.err: File: "file:///data/data/com.myna.mynarsa/files/app/vendor.js, line: 97359, column: 14
System.err:
System.err: StackTrace:
System.err:     Frame: function:'', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 97359, column: 15
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 104881, column: 30
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 106117, column: 30
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 105976, column: 14
System.err:     Frame: function:'module.exports../MainActivity.ts.Activity.onCreate', file:'file:///data/data/com.myna.mynarsa/files/app/MainActivity.js', line: 169, column: 25
System.err:
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2917)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2978)
System.err:     at android.app.ActivityThread.-wrap14(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1628)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6646)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: TypeError: Cannot read property 'create' of undefined
System.err: File: "file:///data/data/com.myna.mynarsa/files/app/vendor.js, line: 97359, column: 14
System.err:
System.err: StackTrace:
System.err:     Frame: function:'', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 97359, column: 15
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 104881, column: 30
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.setActivityContent', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 106117, column: 30
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.ActivityCallbacksImplementation.onCreate', file:'file:///data/data/com.myna.mynarsa/files/app/vendor.js', line: 105976, column: 14
System.err:     Frame: function:'module.exports../MainActivity.ts.Activity.onCreate', file:'file:///data/data/com.myna.mynarsa/files/app/MainActivity.js', line: 169, column: 25
System.err:
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1100)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:982)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:969)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:953)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:945)
System.err:     at com.myna.MainActivity.onCreate(MainActivity.java:18)
System.err:     at android.app.Activity.performCreate(Activity.java:6912)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1126)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2870)
System.err:     ... 9 more
ActivityManager: Process com.myna.mynarsa (pid 1711) has died(92,888)
ActivityManager: cleanUpApplicationRecord -- 1711

My MainActivity.android.ts file:

import { setActivityCallbacks, AndroidActivityCallbacks } from "ui/frame";
declare var android, com;

@JavaProxy("com.myna.MainActivity")

class Activity extends android.app.Activity {

    private _callbacks: AndroidActivityCallbacks;

    protected onCreate(savedInstanceState: android.os.Bundle): void {
        if (!this._callbacks) {
            setActivityCallbacks(this);
        }

        this._callbacks.onCreate(this, savedInstanceState, super.onCreate);
    }

    protected onSaveInstanceState(outState: android.os.Bundle): void {
        this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState);
    }

    protected onStart(): void {
        this._callbacks.onStart(this, super.onStart);
    }

    protected onStop(): void {
        this._callbacks.onStop(this, super.onStop);
    }

    protected onDestroy(): void {
        this._callbacks.onDestroy(this, super.onDestroy);
    }

    public onBackPressed(): void {
        this._callbacks.onBackPressed(this, super.onBackPressed);
    }

    public onRequestPermissionsResult(requestCode: number, permissions: Array<String>, grantResults: Array<number>): void {
        this._callbacks.onRequestPermissionsResult(this, requestCode, permissions, grantResults, undefined /*TODO: Enable if needed*/);
    }

    protected onActivityResult(requestCode: number, resultCode: number, data: android.content.Intent): void {
        this._callbacks.onActivityResult(this, requestCode, resultCode, data, super.onActivityResult);
    }
}

Any suggestion?

[NickIliev]

@jibon57 I was able to reproduce the issue with a test project of mine. Will post here any additional information.

[NickIliev]

@jibon57 there is a change in the way we add custom components in webpack.config described in the migration guide.

here is how I've extend the activity and build the application with webpack.

• add the extended activity file in appComponents

[jibon57]

@NickIliev thanks for the solution & sorry for late response. Did you tried it from windows machine? I am getting this error:

ERROR in ./main.ts
Module not found: Error: Can't resolve 'D:OthersDocumentsoneDriveMy_Worksmob_appsmynarsaappMainActivity.android.js' in 'D:\Others\Documents\oneDrive\My_Works\mob_apps\mynarsa\app'
 @ ./main.ts 5:0-93

ERROR in ./main.ts
Module not found: Error: Can't resolve 'D:OthersDocumentsoneDriveMy_Worksmob_appsmynarsaappMainApplication.android.js' in 'D:\Others\Documents\oneDrive\My_Works\mob_apps\mynarsa\app'
 @ ./main.ts 6:0-96

config:

resolve(__dirname, "app/MainActivity.android.js"),
resolve(__dirname, "app/MainApplication.android.js")

I think it should be like this:

"../app/MainActivity.android.js",
"../app/MainApplication.android.js"

[jibon57]

@NickIliev the solution you have given above not working if I am trying to extend both Application & Activity.

ActivityManager: Start proc 18237:com.myna.mynarsa/u0a443 for activity com.myna.mynarsa/com.myna.MainActivity
System.err: com.tns.NativeScriptException: Failed to create JavaScript extend wrapper for class 'com/myna/Application'
System.err:     at com.tns.Runtime.createJSInstanceNative(Native Method)
System.err:     at com.tns.Runtime.createJSInstance(Runtime.java:643)
System.err:     at com.tns.Runtime.initInstance(Runtime.java:618)
System.err:     at com.tns.RuntimeHelper.initRuntime(RuntimeHelper.java:234)
System.err:     at com.myna.Application.onCreate(Application.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1032)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5839)
System.err:     at android.app.ActivityThread.-wrap3(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1696)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6646)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358)
System.err: java.lang.RuntimeException: Unable to create application com.myna.Application: com.tns.NativeScriptException: JavaScript object for Java ID 0 not found.
System.err: Attempting to call method onCreate
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5842)
System.err:     at android.app.ActivityThread.-wrap3(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1696)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6646)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1468)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1358)
System.err: Caused by: com.tns.NativeScriptException: JavaScript object for Java ID 0 not found.
System.err: Attempting to call method onCreate
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:970)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:954)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err:     at com.myna.Application.onCreate(Application.java:27)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1032)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5839)
System.err:     ... 8 more
ActivityManager: Process com.myna.mynarsa (pid 18237) has died(86,1093)

[NickIliev]

@jibon57 there is a known bug with [email protected] on Windows which you are hitting (paths are incorrect)