React 19 cause SSR issue with page actions

Polaris
1

Hello,

With React 19, using page actions cause rendering issues. To reproduce the issue, use React 19 and add this:

<s-page heading="Test">
  <s-link slot="breadcrumb-actions" href="/app/bar">Bar</s-link>  
</s-page>

In the console the following error will appear:

image
image700×186 7.68 KB

2

Hey @bakura10 - I think I may have been able to replicate this. The error I’m seeing on my end using your snippet there shows up fully like this:

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <MediaQueryProvider2>
      <EventListener>
      <PortalsManager>
        <FocusManager>
          <EphemeralPresenceManager>
            <ui-nav-menu>
            <Outlet>
              <RenderedRoute match={{params:{}, ...}} routeContext={{outlet:null, ...}}>
                <TestPage>
                  <s-page heading="Test">
                    <s-link
                      slot="breadcrumb-actions"
                      href="/app/bar"
-                     style={{display:"none"}}
                    >
+                     Bar
                  ...
        ...

This looks effectively the same as your error, but just wanted to confirm this is what you’re seeing as well - hope to hear from you soon :slight_smile:

3

Yes this is part of the error :wink:

4

Thanks @bakura10 , I’ll look into this more deeply and loop back once I can confirm a fix/next steps - thanks for flagging these issues as always!

7

Hey @bakura10 , we’ve done some further digging into this on our end, and I’ve logged the bug on our end. I can’t guarantee if/when this would be looked at, as SSR hasn’t been our focus when it comes to web components, but I did want to close the loop with you here to let you know we are aware of this and have the issue logged on our end.

Thanks again for flagging, let me know if I can help out with anything further on my end as always :slight_smile:

8

@Alan_G Any update on this? You can reproduce the issue still by initializing a brand new app shopify app init then dropping in an s-link with slot=“breadcrumb-actions”

export default function AdditionalPage() {
  return (
    <s-page heading="Additional page">
      <s-link slot="breadcrumb-actions" href="/app/test-breadcrumb">
        Test Breadcrumb
      </s-link>
...