🐛 Bug Report: throws—Cannot read properties of undefined (reading 'unmount')

[toddb]

📜 Description

Throws an unhandled error.

novu/packages/notification-center/src/utils/react-to-webcomponent.ts

Line 194 in 06843bf

this[rootSymbol].unmount();

TypeError Cannot read properties of undefined (reading 'unmount') 
    node_modules/@novu/notification-center/dist/esm/utils/react-to-webcomponent.js:161:29 f.disconnectedCallback
    app_dist/src/mixins/detachable/index.ts:163:13 s.initDetach
    app_dist/src/mixins/detachable/index.ts:90:28 s.mounted
    node_modules/vue/dist/vue.runtime.esm.js:3013:60 invokeWithErrorHandling
    node_modules/vue/dist/vue.runtime.esm.js:4026:12 callHook$1
    node_modules/vue/dist/vue.runtime.esm.js:4418:12 Object.insert
    node_modules/vue/dist/vue.runtime.esm.js:6924:37 invokeInsertHook
    node_modules/vue/dist/vue.runtime.esm.js:7135:8 s.__patch__
    node_modules/vue/dist/vue.runtime.esm.js:3764:24 Mr.e._update
    node_modules/vue/dist/vue.runtime.esm.js:3870:15 s.r

👟 Reproduction steps

Use the notification center in vue2

<template>
    <notification-center-content-component
            :backend-url="backendUrl"
            :socket-url="socketUrl"
            :subscriber-id="subscriberId"
            :application-identifier="applicationIdentifier"
            :subscriber-hash="subscriberHash"
            :stores="stores"
            :tabs="tabs"
            :show-user-preferences="showUserPreferences"
            :allowed-notification-actions="allowedNotificationActions"
            :theme="theme"
            :styles="styles"
            :color-scheme="colorScheme"
            :i18n="i18n"
            :session-loaded="sessionLoaded"
            :notification-clicked="notificationClicked"
            :unseen-count-changed="unseenCountChanged"
            :action-clicked="actionClicked"
            :tab-clicked="tabClicked" />
</template>

<script lang="ts">

    import type { NotificationCenterContentComponentProps } from '@novu/notification-center';
    import { Component, Prop, VModel, Vue } from 'vue-property-decorator';

    export type FloatingPlacement = 'end' | 'start';
    export type FloatingSide = 'top' | 'right' | 'bottom' | 'left' | 'auto';
    export type FloatingPosition = FloatingSide | `${FloatingSide}-${FloatingPlacement}`;

    export interface INotificationCenterComponentProps {
        backendUrl?: NotificationCenterContentComponentProps['backendUrl'];
        socketUrl?: NotificationCenterContentComponentProps['socketUrl'];
        subscriberId?: NotificationCenterContentComponentProps['subscriberId'];
        applicationIdentifier: NotificationCenterContentComponentProps['applicationIdentifier'];
        subscriberHash?: NotificationCenterContentComponentProps['subscriberHash'];
        stores?: NotificationCenterContentComponentProps['stores'];
        tabs?: NotificationCenterContentComponentProps['tabs'];
        showUserPreferences?: NotificationCenterContentComponentProps['showUserPreferences'];
        allowedNotificationActions?: NotificationCenterContentComponentProps['allowedNotificationActions'];
        popoverConfig?: {
            offset?: number;
            position?: FloatingPosition;
        };
        theme?: NotificationCenterContentComponentProps['theme'];
        styles?: NotificationCenterContentComponentProps['styles'];
        colorScheme?: NotificationCenterContentComponentProps['colorScheme'];
        i18n?: NotificationCenterContentComponentProps['i18n'];
        sessionLoaded?: NotificationCenterContentComponentProps['sessionLoaded'];
        notificationClicked?: NotificationCenterContentComponentProps['notificationClicked'];
        unseenCountChanged?: NotificationCenterContentComponentProps['unseenCountChanged'];
        actionClicked?: NotificationCenterContentComponentProps['actionClicked'];
        tabClicked?: NotificationCenterContentComponentProps['tabClicked'];
    }

    @Component
    export default class Notifications extends Vue implements INotificationCenterComponentProps {
        @VModel({
            required: false,
            default: 0,
        })
        public unseenCount!: number;

        @Prop({ required: false })
        public actionClicked!: NotificationCenterContentComponentProps['actionClicked'];

        @Prop({ required: false })
        public allowedNotificationActions!: NotificationCenterContentComponentProps['allowedNotificationActions'];

        @Prop({ required: true })
        public applicationIdentifier!: NotificationCenterContentComponentProps['applicationIdentifier'];

        @Prop({ required: false })
        public backendUrl!: NotificationCenterContentComponentProps['backendUrl'];

        @Prop({
            required: false,
            default: 'light',
        })
        public colorScheme!: NotificationCenterContentComponentProps['colorScheme'];

        @Prop({ required: false })
        public i18n!: NotificationCenterContentComponentProps['i18n'];

        @Prop({ required: false })
        public notificationClicked!: NotificationCenterContentComponentProps['notificationClicked'];

        @Prop({ required: false })
        public popoverConfig!: { offset?: number; position: FloatingPosition };

        @Prop({ required: false })
        public sessionLoaded!: NotificationCenterContentComponentProps['sessionLoaded'];

        @Prop({ required: false })
        public showUserPreferences!: NotificationCenterContentComponentProps['showUserPreferences'];

        @Prop({ required: false })
        public socketUrl!: NotificationCenterContentComponentProps['socketUrl'];

        @Prop({ required: false })
        public stores!: NotificationCenterContentComponentProps['stores'];

        @Prop({ required: false })
        public styles!: NotificationCenterContentComponentProps['styles'];

        @Prop({ required: false })
        public subscriberHash!: NotificationCenterContentComponentProps['subscriberHash'];

        @Prop({ required: false })
        public subscriberId!: NotificationCenterContentComponentProps['subscriberId'];

        @Prop({ required: false })
        public tabClicked!: NotificationCenterContentComponentProps['tabClicked'];

        @Prop({ required: false })
        public tabs!: NotificationCenterContentComponentProps['tabs'];

        @Prop({ required: false })
        public theme!: NotificationCenterContentComponentProps['theme'];

        @Prop({ required: false })
        unseenCountChanged!: NotificationCenterContentComponentProps['unseenCountChanged'];

        public mounted(): void {
            // listen to the unseen count changed event propagated from the web component
            document.addEventListener('novu:unseen_count_changed', (event) => {
                this.unseenCount = (event as CustomEvent).detail as number;
            });
        }

    }
</script>

👍 Expected behavior

Errors should be handle gracefully and logged

👎 Actual Behavior with Screenshots

It throws an unhandled error which then needs to be trapped (and in my case is then thrown to Bugsnag if not handled)

Novu version

Self Hosted 0.20.0

npm version

No response

node version

No response

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to submit PR?

None

[scopsy]

Replaced by @novu/react