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

Solved

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

Edward_Wong2
Shopify Partner
9 0 7

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)

BStubbs
Shopify Partner
137 16 62

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
137 16 62

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!
Big_Admin
Shopify Partner
2 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
Visitor
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
Visitor
1 0 0

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

 

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

iffikhan30
Shopify Partner
249 35 45

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

Custom theme and app [remix] expert.

Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
joshbedo
Tourist
10 0 3

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