Duplicate children keys in getStylesheetPrefetchLinks

[grinkus-adapt]

What version of Remix are you using?

1.14.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Open the sandbox and devtools. Clear the console.
2. Hover over the "Foobar?" link with mouse (or focus with keyboard, etc).
3. See that there's a "Encountered two children with the same key, /build/_assets/Component-O4OLHRZ6.css. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version." warning in the devtools console.

The issue is that we're importing the stylesheet in a component, that is imported in a few different places.

Expected Behavior

No errors in the console.

Actual Behavior

There's an error in the devtools console "Warning: Encountered two children with the same key, /build/_assets/Component-O4OLHRZ6.css. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."

[grinkus-adapt]

I imagine doing something like the code below in remix-react/links.ts would resolve the issue, but I'm not totally sure if that wouldn't break anything.

diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts
index 6c070d574..dc59eb38e 100644
--- a/packages/remix-react/links.ts
+++ b/packages/remix-react/links.ts
@@ -338,6 +338,15 @@ export async function getStylesheetPrefetchLinks(
     .flat(1)
     .filter(isHtmlLinkDescriptor)
     .filter((link) => link.rel === "stylesheet" || link.rel === "preload")
+    .filter(
+      // Dedupe links by rel and href
+      (link, indexToFind, linksArr) => {
+        let foundIndex = linksArr.findIndex(needle => {
+          return needle.href === link.href && needle.rel === link.rel;
+        });
+        return foundIndex === indexToFind
+      }
+    )
     .map((link) =>
       link.rel === "preload"
         ? ({ ...link, rel: "prefetch" } as HtmlLinkDescriptor)

[markdalgleish]

Thanks for raising this issue, and thanks for the suggested fix! I've opened a PR that goes a bit further than your suggested fix because this was actually a symptom of a deeper issue: #7060

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-a179aa7-20230809 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-b1149bb-20230810 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!