Shopify Tutorial: AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided

Retired Boards Appdev Tools
1

Hi all,

I follow the shopify dev tutorial to bulid a shopify app with node and react as below URL:

After i add the shopify app bridge for server.js & _apps.js, and try to access the apps in the development store.

The app can be show properly. However, when i click the “navigation” button. the page will be shown error below.

Unhandled Runtime Error

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

Is anyone know the reason of this? i have search the shopify community for similar case but look like the similar problem is not using same component. Thanks.

2

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris#add-shopify-app-bridge

Check out this caution on this page. You need to make sure you are supplying the shop in the query param.

3

It looks like @Shopify_77 /app-bridge-react v2.0.0 has different parameters that it accepts, namely the ‘host’ parameter which is not provided in the aforementioned walkthrough. I rolled back to v1.24.0 and everything worked fine.

https://www.npmjs.com/package/@shopify/app-bridge-react

This tutorial should probably be updated.

4

Thanks so much for this response. Saved me time as I could not get the tutorial working for the life of me, but downgrading the app-bridge-react to <v2.0.0 worked!

5

Found this and it sorted me out without having to revert react.

https://github.com/Shopify/shopify-app-node/issues/628

6

Please check your @Shopify_77 /app-bridge-react version if you used 2.0.1 then you need to add the host just like you add shopOrigin and shoplike this

{In _app.js file:

const { Component, pageProps, shopOrigin , host } = this.props;

const config = { apiKey: API_KEY , shopOrigin, forceRedirect: true , host};

MyApp.getInitialProps = async ({ ctx }) => {

return {

shopOrigin: ctx.query.shop, host: ctx.query.host

}

}

}

in your code and also embed host in server.js file like you can do for shop. You can also search about the latest changes about appBridge

or If you can’t able to resolve this error then run this query on your terminal to change app-bridge-react version (npm install @Shopify_77 [email removed]

May be this is helpful for both of you and other peoples who face this issue

7

I have all this added and still can’t get that error to go away when i deploy with serverless to S3/Cloudfront using serverless nextjs component