@shopify/app-bridge-react useToast()

Retired Boards Appdev Tools
1

Hi,

I’m using the useToast hook and I often get the following error:

TypeError: Cannot read properties of undefined (reading 'unsubscribe')

So toast is undefined, as the error is in reference to the useEffect cleanup in the below code:

function useToast() {
    var app = useAppBridge_1.useAppBridge();
    var toast;
    var show = react_1.useCallback(function (content, options) {
        toast = Toast_1.create(app, {
            message: content,
            isError: options === null || options === void 0 ? void 0 : options.isError,
            duration: (options === null || options === void 0 ? void 0 : options.duration) || exports.DEFAULT_TOAST_DURATION,
        });
        toast.dispatch(Toast_1.Action.SHOW);
        if (options === null || options === void 0 ? void 0 : options.onDismiss) {
            toast.subscribe(Toast_1.Action.CLEAR, options === null || options === void 0 ? void 0 : options.onDismiss);
        }
    }, [app]);

// HERE
    react_1.useEffect(function () {
        return function () {
            toast.unsubscribe();
        };
    }, []);
    return { show: show };
}
exports.useToast = useToast;

This will happen as I navigate between pages, or as I’m developing with hot reloading. The hot reloading part isn’t an issue, but the navigating is as this will happen while the app is live. Is there any reason that is in my control that toast would be undefined at any point? Or would the library need to be amended to check if it exists first? And if so, what’s the alternative in the meantime, use the Polaris component?

If you need any more information let me know, thanks!

Best,

Curtis

1 Like
2

Hey @CurtisRF . How are you?

I’m Olavo, a developer from the App Bridge team. Thank you for reporting this and for pinpointing the culprit. We’re missing a null check there. I’ll make a fix and publish a new patch version.

Cheers

Olavo

3

Thanks, Olavo!

4

Hi Olavo,

I’ve seen 3.0.1 is out, but I’m still getting the same error. Can you confirm whether this has yet to be addressed? And if so, when can we expect to see a fix, please?

5

Hey.

Sorry for the delay. It’s been a busy couple of weeks.

Yes. We’re addressing this along with a couple of other things. We’ll be publishing this together with other fixes and small features in a soon-to-be-released minor version. I’ll post an update here to let you know.

6

Sure, no problem. Thanks again.

7

Hello @CurtisRF ! How are you?

We have just released App Bridge version 3.1.0. Would you mind checking if the issue was fixed?

8

Hi @olavoasantos ,

Very good thanks. The issue is certainly fixed. Appreciate your help!

9

That’s awesome to hear! Thanks for letting me know.