Polaris web components not rendering

Technical Q&A
1

I am developing a custom app using Remix template and tried to use Polaris web components (s-*) for embedded Admin pages but they are not rendering at all. I believe polaris.js that is supposed to be injected automatically by AppProvider is not getting loaded. There are no console errors that indicate what the root cause could be.

Any idea?

2

Hey @dnadj,

If you need help specific with the app development then I can recommend you to post your query to Shopify Dev Community.

If this was helpful mark as Solution and like it.
Thanks

3

Hello,

You need to manually inject the script for the web components into the of your application’s main layout file, which is usually app/root.tsx or a similar top-level route.

Locate your main layout file (e.g., app/routes/app._index.tsx if you’re looking for the route that wraps everything, or maybe a custom app/root.tsx if you customized the template).

Ensure you have this script tag loaded alongside your App Bridge script:

{/* The App Bridge key/script is probably already here: */}

{/* *** This is the critical, missing piece for s-* components *** */}

{/* … other head content … */}

When this polaris.js file loads, it scans the DOM, sees your or tags, and converts them into the fully rendered UI elements, which is why they suddenly start working!

If you open your browser’s DevTools (F12) and go to the Network tab, then filter by JS, you probably won’t see an entry for polaris.js—only app-bridge.js. Once you add the line and reload, you should see both, and your components should render!

Hope this answer helpful to you !

Best Regard,

ava

4

@ava951robinson I read that option as legacy and not to use AppBridge with Remix and the Unified UI approach. Is that incorrect.?

@The_ScriptFlow Thank you. I will post in the dev community as well.