How to inherit context correctly when using yarn workspaces?

[theronpatrick]

I have a monorepo using yarn workspaces and lerna. The structure of my app is basically a 'hub' for importing other yarn packages, and what I'd like to be able to do is allow each package that is being imported to define their own Routes. This works fine if the components are imported from the same package, but when they're imported from other yarn packages, the react router context is lost.

I believe the problem is that both packages are imported separate instances of react-router, so the context for Router is not being passed down from the parent to child components. It seems similar to this issue with version of React, but I'm not sure if there's a workaround or other suggested way to fix this issue with react router.

A simplified example of what I'm trying to achieve is:

// ImportedApp.js
function ImportedApp() {
    return (
        <Routes>
            <Route path="/" element={<div>Root of app</div>} />
            <Route path="testSubSection" element={<div>Sub page of app</div>} />
        </Routes >
    );
}

// App.js
import ImportedApp from 'ImportedApp';

function AppRoutes() {
    return (
        <Routes>
            <Route
                path="/importedApp/*"
                element={
                      <ImportedApp />
                }
            <Route
                path="/"
                element={<div>My App</div>}
            />
        </Routes>
    );
}

In the above example, if ImportedApp.js is in the same package as App.js, there are no problems. But if I have the exact same code and import it from a separate yarn package, I get
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.

I'm not sure if this is more relevant to react-router-dom, so please let me know if this question is better directed in that repo. Thanks in advance for the help!

[KasimAhmic]

By chance, did you ever figure this out? Cause I'm having the same exact issue with a monorepo using react-router-dom v6

[SmileyJames]

You are using different versions of react-router-dom in the two workspaces.

Change both versions in the package jsons to match. Run yarn. Now only one version of the dependency will exist, not multiple versions. If using nodeLinker you'll notice react router Dom is hoisted to the root node modules

Yarn upgrade-interactive is very helpful for keeping versions across a mono repo matching and up to date

The root cause of the problem is that each version has its own react context. If they share dependency versions they will share that context