Using react-router-dom's Link from the external package inside Remix

[pkalisiewicz]

I am trying to use react-router-dom inside our internal package, for example, we consume Link from react-router-dom that is being used in Remix. This is a shared component library, so I don't want to include Remix in it.

I have been using this configuration for a long time, although after the latest update to Remix (any change above Remix 1.10), it started throwing me the error of missing context.

Anyone can help me out with it?

Previously I created an issue, although it was closed and I have been told to use the Discussions tab.

Here is the exact scenario:

What version of Remix are you using?

1.16.0

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

• Yes

Steps to Reproduce

1. Set up a Remix project
2. Install react-router-dom, or any library that consumes react-router-dom under the hood (such as component library)
3. Import the Link component and use it directly anywhere in the Remix app.
4. Observe the error related to the missing context for the library's basename.

Expected Behavior

The Link component should render a component without any issues. This is because it should be using the upper context created by RemixBrowser (client-side) and RemixServer (server-side).

Actual Behavior

The application breaks when using the Link component from react-router-dom directly in a Remix app. The error message mentions the missing context for the library's basename.

To better understand the issue, please refer to the following StackBlitz example

https://stackblitz.com/edit/remix-run-remix-kdzgmg?file=package.json,app%2Froutes%2F_index.tsx

[ramboInTheSky]

any news on this?

[nickmeewis]

I experienced the same issue, found this answer on stack-overflow that helped me work around it.
https://stackoverflow.com/questions/66747556/react-js-error-uselocation-may-be-used-only-in-the-context-of-a-router-com#answer-76957173