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

Solved
Edward_Wong2
Shopify Partner
8 0 1

Hi all,

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

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

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.

Accepted Solution (1)

Accepted Solutions
BStubbs
Shopify Partner
135 16 59

This is an accepted solution.

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

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

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!

View solution in original post

Replies 6 (6)
BStubbs
Shopify Partner
135 16 59

This is an accepted solution.

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

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

Was this helpful? Press like!
Did it fix the problem? Mark it as the solution for others!
Buy me a beer? Well, sure!
Ceramcor_Admin
New Member
1 0 1

It looks like @Shopify/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.

jeffz
New Member
1 0 0

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!

venom9122
New Member
1 0 0
iffikhan30
Shopify Partner
1 0 0

Please check your @Shopify/app-bridge-react version if you used 2.0.1 then you need to add the host just like you add shopOrigin and shop like 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/app-bridge-react@^1.30.0)

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

joshbedo
Tourist
10 0 2

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