Solved

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

James-AvonRes
Visitor
3 0 0

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();

...

 

Accepted Solution (1)

Henry_Tao
Shopify Staff
91 28 15

This is an 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.

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Reply 1 (1)

Henry_Tao
Shopify Staff
91 28 15

This is an 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.

Henry | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog