Solved

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

limeforadime
Shopify Partner
5 0 4

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.

Accepted Solution (1)
olavoasantos
Shopify Staff
21 5 15

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

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 21 (21)

martynasmonetha
Shopify Partner
3 0 2

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

olavoasantos
Shopify Staff
21 5 15

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?

 

To learn more visit the Shopify Help Center or the Community Blog.

limeforadime
Shopify Partner
5 0 4

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
Shopify Partner
3 0 2

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

JoeyF
Shopify Staff (Retired)
35 7 12

@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? 🙏

To learn more visit the Shopify Help Center or the Community Blog.

limeforadime
Shopify Partner
5 0 4

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
Shopify Partner
28 5 8

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
Shopify Partner
13 0 3

Same issue in my project with the latest version 3.0.1

 

@olavoasantos and @Shopify , any updates on this?

olavoasantos
Shopify Staff
21 5 15

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

To learn more visit the Shopify Help Center or the Community Blog.

ocastx
Shopify Partner
28 5 8

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
Shopify Partner
13 0 3

Hi @olavoasantos!

 

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

 

Thanks for this update! 😎

limeforadime
Shopify Partner
5 0 4

@olavoasantos 

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

martynasmonetha
Shopify Partner
3 0 2

Works for me as well - thanks!

towfiqi
Shopify Partner
3 0 0

@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
Shopify Staff
21 5 15

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?

To learn more visit the Shopify Help Center or the Community Blog.

towfiqi
Shopify Partner
3 0 0

@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
Shopify Staff
21 5 15

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.

To learn more visit the Shopify Help Center or the Community Blog.

towfiqi
Shopify Partner
3 0 0

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
Shopify Partner
2 0 0

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
Shopify Partner
2 0 0

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
Lumetic-Dev
Shopify Partner
1 0 0

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?