nativescript-windowed-modal icon indicating copy to clipboard operation
nativescript-windowed-modal copied to clipboard

Published 20 hours ago • verified publisher icon mukaschultze

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

Open rkJun opened this issue 5 years ago • 12 comments

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 avatar Jul 18 '19 05:07 rkJun

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

rkJun avatar Jul 18 '19 06:07 rkJun

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?

tillsanders avatar Jul 18 '19 10:07 tillsanders

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

edusperoni avatar Jul 18 '19 17:07 edusperoni

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.

ysk8 avatar Jul 21 '19 02:07 ysk8

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

edusperoni avatar Jul 22 '19 00:07 edusperoni

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.

ysk8 avatar Jul 22 '19 09:07 ysk8

@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

tillsanders avatar Jul 22 '19 09:07 tillsanders

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

edusperoni avatar Jul 22 '19 13:07 edusperoni

@edusperoni Unfortunately yes!

tillsanders avatar Jul 23 '19 14:07 tillsanders

when update this plugin for androidX and for NS6?

adfdev avatar Jul 28 '19 15:07 adfdev

@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

edusperoni avatar Jul 29 '19 12:07 edusperoni

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.

manijak avatar Aug 04 '19 10:08 manijak