NextJS with Dynamic Routing throwing AppBridge Error

Retired Boards Appdev Tools
1

I am using NextJS to do dynamic routing.

My file is called

[itemId].js

Although to do dynamic routing, you need to specify getStaticPaths and getStaticProps.
The minute I specify those, AppBridge throws an error.

AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided

I have tried to specifically adding host in both getStaticPaths and getStaticProps but it still asks to provide it.
Below I have provided how those functions work, I just have a random value for host to not share it.

export const getStaticPaths = async (ctx) => {
    return {
        paths: [{ params: { itemId: "1", host: 'myhost' }}], 
       fallback: 'blocking',
    }
}

export async function getStaticProps(data) {
    return { 
        props: {itemId: "1", host: 'myhost'
    }
  }
}

Any help on getting dynamic routing working would be appreciated with some code examples if there are.

Thank you.

2

I believe your error is unrelated to your getStaticPaths functions. It would also happen if youā€™d have any other routing.

It is going wrong wherever you have this line of code:

<AppBridgeProvider config={config}>

Where config is:

const config = {
  apiKey: process.env.NEXT_PUBLIC_SHOPIFY_API_PUBLIC_KEY,
  forceRedirect: true,
  shopOrigin,
  host
};

The host is undefined. Iā€™ve seen more people mention this, but host is not always returned by Shopify in the URL.

Iā€™ve had to get a bit creative to solve this.

First I create an object of all the params from the url. If host is a part of that, I use that.
If that is not the case I check if shop is part of the params, because host is actually the shop but base64 encoded. I stumbled upon that little bit of information by pure luck. I did btoa( shop ) and it worked and hasnā€™t failed me yet so it must be true.

If shop also isnā€™t part of the params, I just pluck it out of the start of the URL. I canā€™t remember at the moment if it should be the full ā€œshop-slug.myshopify.comā€ part or just what becomes before the ā€œ.myshopify.comā€ part: ā€œshop-slugā€, but you can get there by trial and error.

So it would look something like this:

// get params from url
const params = getSearchParams( window.location.search );
let host;
if ( params?.host ) {
  host = params.host;
} else if ( params?.shop ) {
  host = btoa( params.shop );
} else {
  host = btoa( /* get from url manually */ );
}

I hope this helps.

3

Thanks for your help. I feel like I am getting closer.

One other issue that came up, now since the host displays, the url changes though

if I visit /items/item/1 for example, everything loads up, but then the URL changes to:
/items/item/[itemId] ā€¦ any idea on this?

4

Yup. I had that as well. I fixed that in my RoutePropagator. Canā€™t remember what part exactly solved it, but hereā€™s what I have.

In _app.tsx I have:

And then this is my full RoutePropagator:

import { useContext, useEffect } from "react";
import Router, { useRouter } from "next/router";
import { Context as AppBridgeContext, RoutePropagator as ShopifyRoutePropagator } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

function RoutePropagator() {
  const router = useRouter();
  const { route, asPath }: { route: string, asPath: string } = router;
  const appBridge: any = useContext( AppBridgeContext );

  useEffect( () => {
    appBridge.subscribe( Redirect.Action.APP, ( payload: any ) => {
      Router.push( payload.path );
    } );
  }, [appBridge] );

  return appBridge && route ? (
    //@ts-ignore
    

I believe it was the `useEffect()` that fixed it where I push the payload.path into the router when listening (.subscribe()) to app navigation events in appbridge.
5

Thank you! I am getting

TypeError : Cannot read properties of null (reading ā€˜subscribeā€™) from the useEffect() hook, I will do some investigations and let you know

6

appBridge is undefined then. Do you have the dependency installed correctly?

These are the AppBridge related ones that I have:

"@shopify/app-bridge": "^2.0.4",
"@shopify/app-bridge-react": "^2.0.4",
"@shopify/app-bridge-utils": "^2.0.4",

If you have, running another npm install often works for me with stuff like this.

7

I was missing

/app-bridge

Installed it, removed node_modules and ran npm i again.

I also had the

in the wrong spot. Had to be inside the component in _app.js

Everything seems to be working! URL paths donā€™t change change now to [itemId]. Thanks so much :slightly_smiling_face:

8

Great to hear. Happy to help.

9

You saved my day! So grateful.