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

Retired Boards Appdev Tools
1

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_77 [email removed] 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();

...
2

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.

1 Like