Error - "useFeaturesAvailable(...) is undefined" when used in the example app

[James-AvonRes]

Hi.  I'm getting an error message when I try to use the "useFeaturesAvailable" hook in our Shopify app.  I've tried to use the code example for useFeaturesAvailable as shown in the App Bridge documentation, (https://shopify.dev/apps/tools/app-bridge/actions/features#usefeaturesavailable,) even in a brand new Node based Shopify app, (created with the "npm init @Shopify/app@latest" command,) and I still get an error.

I'm fairly new to using the Shopify SDK and React, so I may be doing something wrong here, but I can't figure out why the example from the documentation won't work in a simple starting app.  I added the following line to the beginning of the ProductCard() function in web/frontend/components/ProductsCard.jsx file:

const {ContextualSaveBar} = useFeaturesAvailable('ContextualSaveBar');

After including useFeaturesAvailable in the import, I get an error logged in the browser's console with the following message:

Uncaught TypeError: useFeaturesAvailable(...) is undefined

Please help.  Is this a bug, or am I missing something?  Below is a snippet of the ProductCard.jsx as generated by the Shopify CLI with the included changes I've made:

import { useState } from "react";
import {
  Card,
  Heading,
  TextContainer,
  DisplayText,
  TextStyle,
} from "@shopify/polaris";
import { Toast, useFeaturesAvailable } from "@shopify/app-bridge-react";
import { useAppQuery, useAuthenticatedFetch } from "../hooks";

export function ProductsCard() {
  const {ContextualSaveBar} = useFeaturesAvailable('ContextualSaveBar');
  const emptyToastProps = { content: null };
  const [isLoading, setIsLoading] = useState(true);
  const [toastProps, setToastProps] = useState(emptyToastProps);
  const fetch = useAuthenticatedFetch();

...

[Henry_Tao · Accepted solution]

Hi @James-AvonRes 

Sorry about this issue. This hook currently returns optional value. So, you need to check for undefined / null in the meantime. I created a ticket internally to fix it. Thanks for reporting.