Embeded App routes missing

Shopify Apps
1

We have developed a Shopify embedded app that includes different routes such as app, edit, settings, and billing. Despite these routes being present in the code, there seems to be an issue with the route not appearing in the store output.

We have also tried deleting and recreating the build folder, but the issue still persists.

What could be the reason behind this? If you need any further information from my end, please let me know.

Thank you.

App Screenshot:

App Screenshot
App Screenshot1917×848 168 KB

code Screenshot:

Code Screenshot
Code Screenshot1688×909 164 KB

2

Hey @spritle_support ,

You need to remove the component that’s encapsulating the ui-nav-menu. If you absolutely need it then use it just for the outlet.

3

Thanks for your response.

Unfortunately, the issue was not resolved after removing the frame or moving to the outlet component alone,

Please see the below error message we are getting in the browser, may you get any idea check it?

Error msg:
AppBridgeError: APP::ERROR::INVALID_CONFIG: Provided apiKey %SHOPIFY_API_KEY% is incorrect. Expecting ff1eba4e91930c333e5acwerqwe
at se (cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/api-BGu0Y-khon9a.js:1:4190)
at Ut (cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/api-BGu0Y-khon9a.js:1:4424)
at Ts (cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/api-BGu0Y-khon9a.js:1:12607)
at cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/api-BGu0Y-khon9a.js:1:62288
at cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/en/api-BGu0Y-khon9a.js:1:11688

Thank you

4

Hey Mate,

Could be one of several issues.

  1. Older shopify cli. Check which version you have with shopify version in the terminal and update if needed.
  2. Packages that are out of date or unsupported. Might be a problem with AppBridge package. Check the package.json from the Remix app template for the latest versions https://github.com/Shopify/shopify-app-template-remix/blob/main/package.json
  3. You you have multiple dev environments then make sure to use the correct app config. This will also generate other .env files like .env.staging, .env.development etc. The error says that it can’t find the correct key and expects a different one so it’s possible that the root cause is here.

Hopefully this gives you an idea of where to look. Happy debugging @spritle_support :slightly_smiling_face:

5

Hello, I’m encountering the same issue. I’m using the shopify-app-template-php for my app, and the error started appearing after migrating to App Bridge React 4.

I’ve added the app-bridge.js script to my index.html as follows:

Additionally, I added the following line to my vite.config.js:

process.env.VITE_SHOPIFY_API_KEY = process.env.SHOPIFY_API_KEY;

The app has a few routes, such as dashboard and settings, and they work fine when accessed directly, for example:

https://admin.shopify.com/store/_my_store_/apps/my-app/dashboard
https://admin.shopify.com/store/_my_store_/apps/my-app/settings

However, when I try to open the home route, I encounter the error.

I suspect the issue might be related to this line:

Let me know if you’d like any further adjustments!