Error when opening lightbox: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'widgetId')

Question:
How can I make my code pass in and receive data from a lightbox correctly?

Product:
Wix Editor

What are you trying to achieve:
I would like to pass in data from a page to a lightbox, then take data back out.

What have you already tried:
I tried to set up my code similar to the docs, however, it doesn’t seem to be working. It works fine on preview, but as soon as I publish and try it on the live site, I get this console error:

Additional information:
My code:

Cart Page

import { currentCart } from 'wix-ecom-backend'
import wixWindowFrontend from 'wix-window-frontend';
import { getPaymentPlans } from 'backend/web-modules/paymentPlans.web.js'
import { cart } from 'wix-stores-frontend';

$w.onReady(async function () {
    const cartInfo = await currentCart.getCurrentCart()
    console.log('cart details:', cartInfo)
    const paymentPlans = await getPaymentPlans()

    const lineItems = cartInfo?.lineItems
    if (lineItems && lineItems.length > 0) {
        const registrations = lineItems.filter(item => item.catalogReference.appId === '13d21c63-b5ec-5912-8397-c3a5ddb27a97')
        if (registrations.length > 0) {
            $w('#needAPaymentPlanButton').show()
        } else {
            $w('#needAPaymentPlanButton').hide()
        }
    }

    $w('#needAPaymentPlanButton').onClick(() => {
        console.log('opening!!')
        wixWindowFrontend.openLightbox('Payment Plan Options', { 'paymentPlans': paymentPlans }).then(returnedData => {
            console.log('returnedData is: ', returnedData)
            if (returnedData && returnedData?.selectedPlanId) {
                const paymentPlansFiltered = paymentPlans.filter(plan => plan._id === returnedData.selectedPlanId)
                if (paymentPlansFiltered.length > 0) {
                    const couponCode = paymentPlansFiltered[0]?.couponCode
                    console.log('howdy, plans filtered: ', paymentPlansFiltered, '; plans: ', paymentPlans, '; couponCode: ', couponCode)
                    if (couponCode) {
                        console.log('about to apply coupon: ', couponCode)
                        cart.applyCoupon(couponCode).then(() => { console.log('applied!!!!!');
                            wixWindowFrontend.lightbox.close() }).catch((e) => { console.error('error handling coupon: ', e) })

                    }
                }

            }
        })
    })

});

Payment Plan Options lightbox code

import { cart } from 'wix-stores-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {
    console.log('starting non-async function!')

    let received = wixWindowFrontend.lightbox.getContext();
    console.log('received: ', received)
    console.log('dropdown: ', $w('#paymentPlansDropdownElement'))

    const dropdownOptions = received.paymentPlans.map((plan) => {
        return {
            label: plan.title + ' - every ' + plan.monthsBetweenPayments + 'month' + (plan.monthsBetweenPayments > 1 ? 's' : ''),
            value: plan._id
        };
    });
    console.log('dropdown options: ', dropdownOptions)

    $w('#paymentPlansDropdownElement').options = dropdownOptions

    console.log('options: ', $w('#paymentPlansDropdownElement'), $w('#paymentPlansDropdownElement').options)
});

export function paymentPlanSubmitButton_click(event) {
    console.log('in event handler, button click event: ', event)
    console.log('payment plan is: ', $w('#paymentPlansDropdownElement').value)
    if ($w('#paymentPlansDropdownElement').value) {
        wixWindowFrontend.lightbox.close({selectedPlanId: $w('#paymentPlansDropdownElement').value})
    }
}

This error message is saying that an object is undefined and thus it doesn’t have a property widgetId. I don’t see it in this code but is your code at any point trying to access a widgetId property?

@anthony, nothing in my code references “widgetId” at any point. I also ran a search just to see if it was in any of my custom code and it didn’t find anything.

CleanShot 2024-04-03 at 18.39.55@2x

Hrmm I’m unable to reproduce this error from opening a lightbox: https://anthonyl5.wixstudio.io/lightbox-test

Are you still experiencing the error?

@anthony , yes, I’m still getting the error, but at this point I just put it on the page instead of in a lightbox (which is working fine) and am moving on because I have more pressing issues to attend to. Thanks for your help though.

If you’re able to comment on my other post below it would be greatly appreciated.