Error on Android after NS 6.0 migration. TypeError: Cannot read property 'extend' of undefined

rkJun commented 5 years ago

Which platform(s) does your issue occur on?

Android
device

Please, provide the following version numbers that your issue occurs with:

CLI: 6.0.0
Cross-platform modules: 6.0.1
Runtime(s): tns-android 6.0.0

Plugin(s):

"dependencies": {
"@nstudio/nativescript-floatingactionbutton": "^1.0.0",
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"nativescript-background-http": "^3.4.1",
"nativescript-cardview": "^3.2.0",
"nativescript-carousel": "^4.2.0",
"nativescript-checkbox": "^3.0.3",
"nativescript-facebook": "^4.1.0",
"nativescript-image-cache-it": "^5.0.0-alpha.3",
"nativescript-imagepicker": "^6.2.0",
"nativescript-oauth2": "^1.5.3",
"nativescript-pager": "^9.5.4",
"nativescript-plugin-firebase": "9.0.3",
"nativescript-purchase": "^2.0.13",
"nativescript-theme-core": "^2.0.2",
"nativescript-toasty": "^2.0.0",
"nativescript-ui-listview": "7.0.1",
"nativescript-videoplayer": "^4.2.1",
"nativescript-windowed-modal": "^5.0.6",
"tns-core-modules": "6.0.1",
"uglifyjs-webpack-plugin": "^2.1.3",
"validator": "^11.1.0"
},
"devDependencies": {
"nativescript-dev-webpack": "1.0.1",
"node-sass": "^4.7.1",
"tslint": "~5.11.0",
"typescript": "3.5.3"
},

Please, tell us how to recreate the issue in as much detail as possible.

    page.showModal( "main/vote/vote-page", {
        context: {
          ...
        },
        closeCallback: (response: any) => {
                ...
            }
        },
        dimAmount: 0.8 // Sets the alpha of the background dim
    } as ExtendedShowModalOptions);

When i call showModal, i get the error in android.

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: TypeError: Cannot read property 'extend' of undefined
System.err:
System.err: StackTrace:
System.err:     Frame: function:'__extends', file:'/data/data/appname/files/internal/ts_helpers.js', line: 51, column: 36
System.err:     Frame: function:'', file:'file:///node_modules/nativescript-windowed-modal/windowed-modal.common.js:112:0
System.err:     Frame: function:'initializeDialogFragment', file:'file:///node_modules/nativescript-windowed-modal/windowed-modal.common.js:186:9
System.err:     Frame: function:'androidModal', file:'file:///node_modules/nativescript-windowed-modal/windowed-modal.common.js:189:0
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/core/view/view-common.js.ViewCommon.showModal', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:266:0
System.err:     Frame: function:'onHeartTap', file:'file:///app/main/home/home-page.ts:102:9
System.err:     Frame: function:'_executeCallback', file:'file:///node_modules/tns-core-modules/ui/gestures/gestures.js:299:0
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/gestures/gestures.js:47:0
System.err:     Frame: function:'invoke', file:'file:///node_modules/tns-core-modules/timer/timer.js:19:30
System.err:     Frame: function:'run', file:'file:///node_modules/tns-core-modules/timer/timer.js:23:0
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     at com.tns.gen.java.lang.Runnable.run(Runnable.java:17)
System.err:     at android.os.Handler.handleCallback(Handler.java:751)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6682)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1520)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1410)
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method run failed
System.err: TypeError: Cannot read property 'extend' of undefined
System.err:

rkJun commented 5 years ago

I guess the pull request https://github.com/mukaschultze/nativescript-windowed-modal/pull/10 would solve this problem.

tillsanders commented 5 years ago

Yes, this solves the problem. As a temporary fix, you can simply run the AndroidX migration tool on the plugin directory: npm install ns-androidx-migrate -g && ns-androidx-migrate node_modules/nativescript-windowed-modal/. This is what I did for the mentioned pull request. There is a catch, though: when dismissing the modal by tapping outside of it, another error occurs:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onDismiss failed
System.err: Error: java.lang.IllegalStateException: Cannot remove Fragment attached to a different FragmentManager. Fragment fragment1[1]<Page(20)> is already attached to a FragmentManager.
System.err:     androidx.fragment.app.BackStackRecord.remove(BackStackRecord.java:188)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     androidx.fragment.app.DialogFragment_vendor_51709_26_CustomDialogFragmentImpl.onDismiss(Unknown Source:20)
System.err:     android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1586)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:214)
System.err:     android.app.ActivityThread.main(ActivityThread.java:7037)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)

I'm unable to solve this, since I'm not very much acquainted with Android. Any fixes we can add to the pull request?

edusperoni commented 5 years ago

Can you try it with nativescript-windowed-modal@next?

ysk8 commented 5 years ago

Can you try it with nativescript-windowed-modal@next?

In my case, this allows again that the modals function well with NS6, but there is an issue with dimAmount, in my case it has been set with 0.5 but the background is black. For the Android version.

edusperoni commented 5 years ago

Unfortunately I'm not able to replicate it (the demo app is running without issues on android). Can you share a snippet?

ysk8 commented 5 years ago

Unfortunately I'm not able to replicate it (the demo app is running without issues on android). Can you share a snippet?

Of course, this is part of the code inside in a .vue file:

<template>
   <!-- ... code -->
        <Label 
            col="1" 
           row="0" 
          :text="currentAddress" 
          class="status-title" 
         @tap="openModalTap" 
     />
   <!-- ... code -->
</template>

<script>
const modalUserAddresses = {
    data() {
        return {
            newAddress: '',
        }
    },
    props: [
        "userAddresses"
    ],
    template: 
    `
        <ModalStack class="modal-container">
       // ... 
        </ModalStack>
    `
}

export default {
    methods: {
        openModalTap() {
            this.selectedPin = true,
            this.$showModal(modalUserAddresses, {
            props: {
                userAddresses: this.userAddresses
            },
            fullscreen: true,
            animated: true,
            stretched: false,
            dimAmount: 0.5
            })
        }
   }
}
</script>

<style scoped>
//  css code
</style>

And I will see the code of the demo app also. Thanks.

tillsanders commented 5 years ago

@edusperoni I've installed 6.0.0-rc0 as suggested. Works (mostly) fine, even dimAmount on Android!

Only issue so far: when I close the Modal using the back button on Android, the app crashes. It works fine, however, if I tap outside the modal. Here is the crash log:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onDismiss failed
System.err: Error: java.lang.IllegalStateException: Cannot remove Fragment attached to a different FragmentManager. Fragment fragment1[1]<Page(19)> is already attached to a FragmentManager.
System.err:     androidx.fragment.app.BackStackRecord.remove(BackStackRecord.java:188)
System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     com.tns.gen.androidx.fragment.app.DialogFragment_vendor_59028_28_CustomDialogFragmentImpl.onDismiss(DialogFragment_vendor_59028_28_CustomDialogFragmentImpl.java:25)
System.err:     android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1586)
System.err:     android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     android.os.Looper.loop(Looper.java:214)
System.err:     android.app.ActivityThread.main(ActivityThread.java:7037)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)
System.err: 
System.err: StackTrace:
System.err:     Frame: function:'Frame.disposeCurrentFragment', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:181:20
System.err:     Frame: function:'Frame.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/frame/frame.js:171:13
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:91
System.err:     Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:8
System.err:     Frame: function:'ViewBase.callUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:13
System.err:     Frame: function:'ViewBase.unloadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:444:17
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:246:18
System.err:     Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///node_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:25
System.err:     Frame: function:'ViewCommon.eachChild', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:992:13
System.err:     Frame: function:'ViewBase.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:245:13
System.err:     Frame: function:'View.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:251:36
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:91
System.err:     Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:8
System.err:     Frame: function:'ViewBase.callUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:13
System.err:     Frame: function:'ViewBase.unloadView', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:444:17
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:246:18
System.err:     Frame: function:'LayoutBaseCommon.eachChildView', file:'file:///node_modules/tns-core-modules/ui/layouts/layout-base-common.js:125:25
System.err:     Frame: function:'ViewCommon.eachChild', file:'file:///node_modules/tns-core-modules/ui/core/view/view-common.js:992:13
System.err:     Frame: function:'ViewBase.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:245:13
System.err:     Frame: function:'View.onUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view/view.js:251:36
System.err:     Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:91
System.err:     Frame: function:'ViewBase.callFunctionWithSuper', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:304:8
System.err:     Frame: function:'ViewBase.callUnloaded', file:'file:///node_modules/tns-core-modules/ui/core/view-base/view-base.js:315:13
System.err:     Frame: function:'CustomDialogFragmentImpl.onDismiss', file:'file:///node_modules/nativescript-windowed-modal/windowed-modal.js:134:26
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1242)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1122)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1109)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1089)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1081)
System.err:     at com.tns.gen.androidx.fragment.app.DialogFragment_vendor_59028_28_CustomDialogFragmentImpl.onDismiss(DialogFragment_vendor_59028_28_CustomDialogFragmentImpl.java:25)
System.err:     at android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1586)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7037)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:965)
System.err: Caused by: java.lang.IllegalStateException: Cannot remove Fragment attached to a different FragmentManager. Fragment fragment1[1]<Page(19)> is already attached to a FragmentManager.
System.err:     at androidx.fragment.app.BackStackRecord.remove(BackStackRecord.java:188)
System.err:     ... 14 more

edusperoni commented 5 years ago

@tillsanders can you check if this issue also occurs without calling overrideModalViewMethod()?

tillsanders commented 5 years ago

@edusperoni Unfortunately yes!

adfdev commented 5 years ago

when update this plugin for androidX and for NS6?

edusperoni commented 5 years ago

@adfdev you can try it with nativescript-windowed-modal@next. I'm without the time to properly test it at the moment, but you can report back if it's working or not.

@tillsanders if you're having the same issue without calling that function, it's not related to this plugin

manijak commented 5 years ago

Have the same dim-issue on iOS, running @next. Had to add backgroundColor="#CC000000" on the Page element to make the background a bit transparent.

mukaschultze / nativescript-windowed-modal