No typing for App bridge React

Polaris
1

Hello,

I’m trying to use the new React Router starter (GitHub - Shopify/shopify-app-template-react-router: An template for building Shopify Apps using React Router v7 and above) but I can’t get typing for app bridge types:

image
image1448×322 26 KB

I’ve tried to manually add the types as instructed here: App Bridge but it does not work neither, so it seems there might be an incompatibility somewhere.

Thanks.

2

Hey again @bakura10, sorry you’re encountering so many TS issues on this, happy to help. Can you try this?

npm i -D @shopify/app-bridge-ui-types, then in tsconfig.json set compilerOptions.types to include “@shopify/app-bridge-ui-types” (and keep any existing entries like “react”, “@shopify/app-bridge-types”).

Then reload your TS server/IDE. If that still doesn’t work, just let me know and I can definitely take a look at this with you?

3

Unfortunately this is what I already have @Alan_G . But no typing at all on app bridge components such as ui-title-bar.

4

Hey again @bakura10 Thanks for confirming! I’m sure you checked this already, but, I’d double check to see if the template is using tsconfig.app.json. You should be able to update that to this:

{ “compilerOptions”: { “jsx”: “react-jsx”, “types”: [ “vite/client”, “react”, “react-dom”, “@shopify/app-bridge-types”, “@shopify/app-bridge-ui-types” ] } }

Then, I’d try importing once in your app entry there if you’re not doing so as well: // import '@shopify/app-bridge-ui-types';

If that doesn’t fix things, can you share your:

  • tsconfig.json or tsconfig.app.json (and tsconfig.node.json if present)

  • package.json devDependencies (TypeScript, @types/react, and @shopify/app-bridge-ui-types versions)

If it still fails after that, I’ll get in touch with some folks internally so we can keep digging. A minimal repro repo would help us escalate quickly, so just wanted to ask for the above (happy to set up a DM with you to investigate this further as well if you’d prefer to share that info there).

5

Hi @Alan_G . Here is 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": "ES2024",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },
    "types": ["@react-router/node", "vite/client", "@shopify/app-bridge-ui-types", "@shopify/app-bridge-types"],
    "rootDirs": [".", "./.react-router/types"]
  }
}

To reproduce the issue on your end:

  1. Install the new React Router template from Shopify (GitHub - Shopify/shopify-app-template-react-router: An template for building Shopify Apps using React Router v7 and above).
  2. Install the app bridge types (@shopify/app-bridge-types - npm); I think this should be automatically added by the template btw, as the template itself uses those components.

As you can see, none of the ui-* components are recognized:

image
image1418×346 41.6 KB

6

Hi @bakura10, thanks for sending this my way. I’ll try to replicate this on my end and then speak with some folks internally to get this looked at. Speak with you again soo as soon as I have more info as always :slight_smile: