Property 's-app-nav' does not exist on type 'JSX.IntrinsicElements' after upgrading to RR

[fairjm]

I followed the tutorial to upgrade a Remix template app to React Router, and now the app is running well. I want to try the Polars web component, but I found that VSCode doesn't recognize them.

it seems there is no s-app-nav(using ui-nav-menu is ok).
Other web components are ok.

Here is my package.json:

  "dependencies": {
    "@react-router/dev": "^7.9.1",
    "@react-router/fs-routes": "^7.9.1",
    "@react-router/node": "^7.9.1",
    "@react-router/serve": "^7.9.1",
    "@shopify/app-bridge-react": "^4.1.6",
    "@shopify/polaris": "^12.0.0",
    "@shopify/shopify-app-react-router": "^1.0.0",
    "@shopify/shopify-app-session-storage-drizzle": "^2.0.17",
    "dotenv": "^16.5.0",
    "drizzle-orm": "^0.41.0",
    "isbot": "^5.1.0",
    "mysql2": "^3.14.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^7.9.1",
    "uuid": "^11.1.0",
    "vite-tsconfig-paths": "^5.0.1"
  },
  "devDependencies": {
    "@shopify/api-codegen-preset": "^1.1.1",
    "@shopify/polaris-types": "^1.0.0",
    "@types/eslint": "^9.6.1",
    "@types/node": "^22.2.0",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^6.2.2",
    "drizzle-kit": "^0.30.6",
    "tsx": "^4.19.3"
  },

(same as the new template with drizzle-kit and tsx)

my tsconfig.json:

{
  "include": [
    "env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".react-router/types/**/*"
  ],
  "compilerOptions": {
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2022"
    ],
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2022",
    "baseUrl": ".",
    "types": [
      "@react-router/node",
      "vite/client",
      "@shopify/polaris-types"
    ],
    "rootDirs": [
      ".",
      "./.react-router/types"
    ]
  }
}

eslint is copied from the repo.

code:

import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
import { Link, 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 { AppProvider as PolarisAppProvider } from "@shopify/polaris";
import type {
  LinkLikeComponent,
  LinkLikeComponentProps,
} from "@shopify/polaris/build/ts/src/utilities/link";
import englishI18n from "@shopify/polaris/locales/en.json" with { type: "json" };
import React from "react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";

import { authenticate } from "../shopify.server";
import { refreshShopInfo } from "app/services/shop-service.server";

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

// PolarisLink adapter using imported types
const PolarisLink = React.forwardRef<HTMLAnchorElement, LinkLikeComponentProps>(
  ({ url, children, external, ...rest }, ref) => {
    if (external) {
      return (
        <a href={url} ref={ref} {...rest}>
          {children}
        </a>
      );
    }
    return (
      <Link to={url} ref={ref} {...rest}>
        {children}
      </Link>
    );
  },
) as LinkLikeComponent;
PolarisLink.displayName = "PolarisLink";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin, session } = await authenticate.admin(request);
  console.log("user visit", session.shop, request.url);
  try {
    await refreshShopInfo(admin);
  } catch (error) {
    console.error("refresh shop failed", error);
  }
  return { apiKey: process.env.SHOPIFY_API_KEY || "" };
};

export default function App() {
  const { apiKey } = useLoaderData<typeof loader>();

  return (
    <AppProvider embedded apiKey={apiKey}>
      <PolarisAppProvider i18n={englishI18n} linkComponent={PolarisLink}>
        <s-app-nav>
          <Link to="/app" rel="home">
            Home
          </Link>
          <Link to="/app/config">Settings</Link>
          <Link to="/app/subscribe">Membership</Link>
        </s-app-nav>
        <Outlet />
      </PolarisAppProvider>
    </AppProvider>
  );
}

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

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

[byrichardpowell]

Hey 👋

Please can you try deleting your node modules and installing dependencies again? I've seen issues where older versions of packages don't support s-app-nav, but the latest versions do.

[fairjm]

@byrichardpowell Yes, I also suspect that is the reason. I cleaned the node_modules folder twice and reinstalled, but the problem still persists. Since this was upgraded from Remix, I feel that the dependencies might have been incorrectly locked. This should be an isolated case, but I can still use ui-nav-menu normally, so it’s okay.
I will try deleting the lock file and reinstalling later to see if that fixes the issue.

[maria-mcparland]

Hey, I had the same problem today after migrating from remix.
I removed node-modules, my pnpm-lock file etc but this didn't work.

I had to add "@shopify/app-bridge-types" to my tsconfig.json types section and install the package.

Here is my package.json:

{
  "name": "whiskyblender-order-printer",
  "private": true,
  "scripts": {
    "build": "react-router build",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "react-router-serve ./build/server/index.js",
    "docker-start": "npm run setup && npm run start",
    "setup": "prisma generate && prisma migrate deploy",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "graphql-codegen": "graphql-codegen",
    "vite": "vite"
  },
  "type": "module",
  "engines": {
    "node": ">=20.10"
  },
  "dependencies": {
    "@prisma/client": "^6.16.3",
    "@react-router/dev": "^7.9.3",
    "@react-router/fs-routes": "^7.9.3",
    "@react-router/node": "^7.9.3",
    "@react-router/serve": "^7.9.3",
    "@shopify/admin-api-client": "^1.0.6",
    "@shopify/app-bridge-react": "^4.2.4",
    "@shopify/shopify-app-react-router": "^1.0.0",
    "@shopify/shopify-app-session-storage-prisma": "^7.0.0",
    "@shopify/storefront-api-client": "^1.0.9",
    "isbot": "^5.1.31",
    "prisma": "^6.16.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.9.3",
    "react-router-dom": "^7.9.3",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "devDependencies": {
    "@shopify/api-codegen-preset": "^1.2.0",
    "@shopify/app-bridge-types": "^0.5.3",
    "@shopify/polaris-types": "^1.0.1",
    "@types/eslint": "^9.6.1",
    "@types/node": "^22.18.8",
    "@types/react": "^18.3.25",
    "@types/react-dom": "^18.3.7",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "eslint": "^8.57.1",
    "eslint-import-resolver-typescript": "^3.10.1",
    "eslint-plugin-import": "^2.32.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^4.6.2",
    "graphql-config": "^5.1.1",
    "prettier": "^3.6.2",
    "typescript": "^5.9.3",
    "vite": "^6.3.6"
  },
  "workspaces": {
    "packages": [
      "extensions/*"
    ]
  },
  "trustedDependencies": [
    "@shopify/plugin-cloudflare"
  ],
  "author": "mariamcparland"
}

tsconfig.json:

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", ".react-router/types/**/*"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2022",
    "baseUrl": ".",
    "types": [
      "@react-router/node",
      "vite/client",
      "@shopify/polaris-types",
      "@shopify/app-bridge-types"
    ],
    "rootDirs": [".", "./.react-router/types"]
  }
}

[Zn4rK]

This behavior is caused by how @shopify/app-bridge-types applies its typings. Instead of exporting normal module-based types, it relies on ambient global augmentation (including DOM, React attribute, and JSX intrinsic element augmentation). Because of that, the types don’t activate unless the project matches some specific TypeScript conditions — simply installing or referencing the package isn’t always enough.

In practice this can fail silently if:

• the ambient .d.ts file isn’t included in the global scope
• the project uses isolated modules or certain build setups
• the JSX runtime isn’t react-jsx
• another library overrides the JSX namespace

When that happens, TypeScript just falls back to default DOM + React types, which makes it look like the App Bridge typings are incomplete or ignored.

@shopify/polaris-types doesn’t have this issue because it exposes types in a more modular way, so they work in a wider range of toolchains.

It would help if the package provided an explicit opt-in import path, for example - or does the same thing that @shopify/polaris-types does.

import '@shopify/app-bridge-types/global';

You can actually see this happening if you remove AppProvider from App.tsx:

Hopefully someone at Shopify cares about this, and manages to push a fix. It feels and seems like they were a bit too eager to get the web components out, because these type errors wasted at least a day for me :)

[byrichardpowell]

Hey 👋

Sorry for the problems and thanks for the detailed information.

I'm going to move this issue to the right team.