useDelegatedAnchors breaks links to resource routes, links with reloadDocument set

[lpsinger]

Describe the bug

The Remix docs state that you must use reloadDocument to link to resource routes, like this:

<Link to="this-is-a-resource-route" reloadDocument>This is a link to a resource route.</Link>

If you have such a Link inside a component to which you have applied useDelegatedAnchors, then when you follow the link, it fails with the following client-side error:

error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of RemixRoute. %E2%80%94 https://.../build/entry.client-VNG4R5DS.js:20463

Your Example Website or App

https://stackblitz.com/edit/remix-run-remix-a55xcd?file=app/routes/_index.tsx

Steps to Reproduce the Bug or Issue

Open and run the StackBlitz. In the Remix app, click the link called "A resource route".

Expected behavior

Your browser should follow the link and display the resource route, which is JSON and looks like this:

{"hello":"world"}

Screenshots or Videos

Screen.Recording.2023-05-17.at.17.36.34.mov

Platform

• OS: macOS
• Browser: Safari
• Version: [e.g. 91.1]

Additional context

No response

[sergiodxa]

Your anchor is using a explicit Link component, right?
Not converting [link](/resource/route) to an anchor, is that correct?

I think I could add a data-no-delegate attribute support so you can add it to your links with reloadDocument

[lpsinger]

In the reproducer, it's an explicit Link component.

Is there any way to just recognize and ignore all explicit Link components?

[sergiodxa]

Is there any way to just recognize and ignore all explicit Link components?

Not directly, since renders a normal and useDelegatedAnchors works at the DOM level, there's no way to know that specific was rendered by a .

The only possible solution is to support a specific data-* attribute to add manually to every <Link> you want useDelegatedAnchors to ignore.

[lpsinger]

See remix-run/remix#7502 for a way to do this with Remix itself...