App Navigation Missing in Production (Fresh Shopify App)

App Bridge
1

Hello Everyoneđź‘‹

Issue Description

I created a brand new Shopify app using shopify app init and selected “Build a React Router app (recommended)”. Without making ANY changes to the default template, I deployed it to production.

Result:

  • :white_check_mark: Dev: Side navigation appears correctly (shows “Home” and “Additional page”)
  • :cross_mark: Production: Side navigation is completely missing
  • Pages still work if I manually navigate to URLs
  • No console errors or network failures

Steps to Reproduce

  1. Run shopify app init
  2. Choose “Build a React Router app (recommended)”
  3. Deploy to production without any code changes
  4. Install app on a production store

Screenshots

Dev Environment (Works):

image
image1918Ă—861 85.3 KB

  • App navigation visible in left sidebar with “Home” and “Additional page” links

Production Environment (Broken):

Screenshot 2025-12-23 120230
Screenshot 2025-12-23 1202301496Ă—864 77 KB

  • No app navigation in left sidebar
  • Only Shopify’s default admin navigation visible

Technical Details

  • Template: Fresh Shopify React Router app template
  • Framework: React Router
  • Interface: Polaris web components
  • App Bridge: Initialized correctly (apiKey confirmed)
  • Environment Variables: Set correctly in production

Code (Default Template)

import { Outlet, useLoaderData, useRouteError } from "react-router";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { AppProvider } from "@shopify/shopify-app-react-router/react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);

  // eslint-disable-next-line no-undef
  return { apiKey: process.env.SHOPIFY_API_KEY || "" };
};

export default function App() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider embedded apiKey={apiKey}>
      <s-app-nav>
        <s-link href="/app">Home</s-link>
        <s-link href="/app/additional">Additional page</s-link>
      </s-app-nav>
      <Outlet />
    </AppProvider>
  );
}

// Shopify needs React Router to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};

I’m ok to share more code if needed..

Questions

  1. Is <s-app-nav> behind a “Dev Preview” feature that’s not available in production yet?
  2. What’s the recommended approach for production apps today?

Environment

  • Node version: node-v22.21.1
  • Shopify CLI version: @shopify/cli/3.88.1
  • Development store: Navigation works
  • Production store: Navigation missing

Has anyone else experienced this with the latest template? Is this expected behavior or a bug?

@NickWesselman , @julie_antunovic , @alex_law

2

Hi @adarsh_anncode

Please don’t tag individual Shopify employees - this goes against our code of conduct:

Members of the community will respond as soon as they can - however keep in mind engagement may be low during the holiday period, until Jan 5th.

3

I’ve moved this to the App Bridge category, where someone is more likely to be able to help with this issue.

1 Like
4

Thanks for notice! @NickWesselman

5

Any news on this? I’m facing the same problem.

6

I found an alternative deployment approach using Docker that works, but the issue still occurs on EC2.