@shopify/app-bridge-react, getting Error: Host not provided after upgrading past version 2.0.25

[limeforadime]

Hello, I am having a strange issue. My app was fully functional while using app-bridge and app-bridge-react version 2.0.24. However after upgrading to 2.0.25, when I redirect to another page in my app, I am receiving an app bridge error notifying me that there was an invalid configuration and that the host was not provided. I haven't changed anything at all in my code so clearly something changed in v2.0.25 in the way it accesses the host value.

I cannot see the source code for app-bridge-react, as the github project page is private for some reason, so I'm stuck trying to debug using the transpiled dist version and it's really frustrating. If anybody/any maintainers have a clue as to what changed and why this error is happening now, I'd appreciate it.

[martynasmonetha]

I was having exactly the same issue - the same error on redirection. Solved it by downgrading to 2.0.24.

[olavoasantos]

Hey @limeforadime and @martynasmonetha.

I'm Olavo, a developer from the App Bridge team. Thank you for reaching out and bringing this to our attention.

First off, I'm sorry for the frustrating experience. I'll take a look on our side to see what's going on.

In the meantime, could you clarify a couple of things for me:

- Could you verify if this problem still exists on version `2.0.26`?

- Which template are you using for your application (i.e. Node.js, Ruby, PHP, ...)?

- Is this is a new project?

[limeforadime]

Hi Olavo, thank you for getting back to me so soon. 

Sure, to clarify: 
- Yes the same issue happens on version `2.0.26`
- I am using the Node.js template, along with Next.js with a custom Koa server.
- This isn't a new project, I've been working on it for about a year

The exact error I get is "AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided"

If it's helpful at all, I am using the `RoutePropagator` component. Testing it works just fine at version `2.0.24` and below.

Thank you for your time, I appreciate it! Let me know if I can offer more information.

[martynasmonetha]

Same here - error returned when I upgraded from `2.0.24` to `2.0.26`.

[JoeyF]

@limeforadime / @martynasmonetha , the team just published a related bug fix in version 2.0.28, and I want to know whether it fixes your issue. Do you mind checking and letting us know? 🙏

[limeforadime]

Dang, just checked it with version 2.0.28 and also 2.0.29 and I'm still seeing the same error. Let me know if I can offer anything else about my project that may help.

[ocastx]

Having the same issue in my project with version 2.0.30 

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

Using the code from documentation :

function Component() {
  const app = useAppBridge();
  const redirect = Redirect.create(app);
   
  . 
  .
  .

  redirect.dispatch(Redirect.Action.APP, `/route/${id}`);
}

[AlexisS]

Same issue in my project with the latest version 3.0.1

@olavoasantos and @Shopify , any updates on this?

[olavoasantos · Accepted solution]

Hello @AlexisS @ocastx @limeforadime @martynasmonetha!

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

[ocastx]

Hi @olavoasantos!

Just tried, and it seems to work well for me now! Will report back, if there are any more issues. Thank you!

[AlexisS]

Hi @olavoasantos!

I just tried it and seems to work pretty well now!

Thanks for this update! 😎

[limeforadime]

@olavoasantos 

Yes! This worked. Thank you so much, team! 🔥🔥

[martynasmonetha]

Works for me as well - thanks!

[towfiqi]

@olavoasantos  I am using the latest version of Shopify App bridge react (3.1.1) and I am still having this issue. When I reload the page it keeps working fine. Since I am still developing the app, and when I make a change the page hot reloads. But after a few hot reloads, it throws the error again.

[olavoasantos]

Hey @towfiqi .

I think this is the same error in a different scenario. This might be an issue with your project's HMR that's re-rendering the App Bridge provider component and is not finding the `host` parameter definition when recreating the App Bridge instance.

Are you using the new app template that leverages ViteJS?

[towfiqi]

@olavoasantos Thanks for the quick reply. Means a lot 🙂

When the new vite+express version of the template was introduced, I was already 90% done with the app I built using the old template. So I am using the koa+webpack+nextjs template. But I have updated React and all other dependent packages becuase there were lots of vulnerable packages in it. But the issue was happening even bore I updated all the packages. For development purpose, as a quickly fix, I hardcoded the based64 shopify admin url as the host parameter if its not found. But Since I am going live soon, I had to remove the code.

Is it going to happen in dev mode? or will this also occur when the app is hosted live?

If I replace webpack with vite, do you think the issue will get resolved?

Thanks

[olavoasantos]

---

Is it going to happen in dev mode? or will this also occur when the app is hosted live?

I'd expect that this would only happen in dev mode given that it looks related to hot module reloading. A way that you might be able to confirm that is by running the production build of your app locally and testing it on the admin.

---

If I replace webpack with vite, do you think the issue will get resolved?

---

I've seen this happen with Vite's HMR as well, so you might still see this issue with even if you swap them.

[towfiqi]

Just went live and the still getting the same issue. The problem occurs when the session token expires after 24 hours. The Appbridge should redirect the whole page to the /auth url but it does not do that.  This happens only in Chrome.
In firefox, when the session expires, the whole page is redirected to the apps auth url and it creates a new session and then redirects back to shopify app admin and the invalid host issue does not occur. 

Here is the issue in detail: https://github.com/Shopify/koa-shopify-auth/issues/167

It would be great if you guys could help. Our app is live. It would be great if you could give it a try to examine the issue. Maybe it will help you guys debug the issue?

Thanks & Regards

[saurav97]

I am facing same issue with vitejs and react config 

  "@shopify/app-bridge": "^3.7.7",

    "@shopify/app-bridge-react": "^3.7.7",

with this version

[saurav97]

issue solved

new URLSearchParams(location.search).get("host") || window.__SHOPIFY_DEV_HOST

you can use this if host is not define in url it will take from window object

[somin]

Hello @saurav97 

Did you find the resolution for this issue ?

We are using app bridge with the same versions, you have mentioned. and getting 400 bad request "Host Not Provided" issue in the API response.

Thank you.

[Lumetic-Dev]

I still get this issue after going through the shopify app tutorial with app bridge 3.1.1 and the node app template. 

Any advice?