Banner and FilterControl break React hydration

[GoodForOneFare]

Issue summary

I've had to disable some SSR in an internal Shopify project because a couple of Polaris components don't have consistent IDs between server / client.

Banner's unique ID helper is defined at module scope, and never resets on the server side: https://github.com/Shopify/polaris-react/blob/9aa2768d29d9548ac88728580340bfa42b8b7e1f/src/components/Banner/Banner.tsx#L182-L185

TextField's id factory can be overridden, but FilterControl doesn't give callers control over this: https://github.com/Shopify/polaris-react/blob/9aa2768d29d9548ac88728580340bfa42b8b7e1f/src/components/ResourceList/components/FilterControl/FilterControl.tsx#L95-L110

Expected behavior

• Banner should accept an id prop
• ResourceList should either accept an id prop and pass it on to FilterControl -> TextArea (or make everything magically work 😄)

Actual behavior

Banners and ResourcesLists rendered server side hydrate properly on the first load after server startup. Then fail to hydrate on every other page load.

Steps to reproduce the problem

Message me, and I'll describe how to get an internal project into this state.

Reduced test case

N/A because this needs a server.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.12.0
• Browser: all
• Device: Macbook Pro
• Operating System: Mojave 10.14.3

[alex-page]

Thanks for bringing this up @GoodForOneFare. I'll have a look in the next day or two.

[alex-page]

We probably just need to remove the ID from Banner as it's not used for any accessibility enhancements.

[GoodForOneFare]

SearchField now uses module-scoped unique ids and now causes SSR warnings in web.

[CameronGorrie]

[ghost]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[BPScott]

Reopening this as SSR discrepancies are still an issue

[BPScott]

ping @yourpalsonja, it'd be good for the backlog buddies to take a look at this and #1046

[chrisandrewca]

Hi, I'm seeing a similar issue with ResourceList. The 'Showing x items' title is missing. The promoted action is also missing when configured.

Warning: Prop id did not match. Server: "ResourceListItemOverlay11" Client: "ResourceListItemOverlay1"

Are you using the React components? (Y/N): Y
Polaris version number: 4.9.0
Browser: chrome
Device: desktop
Operating System: windows

Server side rendering: Y
Next.js

When I disable SSR for this scenario, the console error disappears but the title and buttons remain missing.

[BPScott]

Probot. Stop that.

[KyleKilbride]

Hey 👋

I am seeing an issue on Web (/admin/marketing) that I believe is related to this issue. Currently, in production, we are seeing out loading state appear briefly inside the Markup for the banner.

This is what it looks like briefly before it goes back to its normal state.

I cannot seem to replicate it locally unless we do a production build of Web.

We are currently using a production build to see if there is anything we can do on Web to fix it there, but I thought I would ping here.

[ghost]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

[BPScott]

Still haven't found the time to polish this off. Waiting for the next version of react and replacing our useUniqueId hook with useOpaqueIdentifier once it becomes stable is gonna be the long term solution.

Components that don't yet use useUniqueId are tracked in #1995

[BPScott]

Actually, gonna close this as a duplicate of #1761 as that's got a more up-to-date state of the world