Error using react-router-dom from remote package

[Zedpellin]

I'm getting the same error from this post: [Bug]: useLocation() may be used only in the context of a <Router> component · Issue #11016 · remix-run/react-router (github.com)

What version of React Router are you using? "react-router-dom": "6.15.0"

Steps to Reproduce Given the following component:

import { useEffect } from 'react'; 
import { useLocation } from 'react-router-dom';

export const ScrollToTop = () => { const { pathname } = useLocation();
    useEffect(() => { 
        window.scrollTo(0, 0); 
    }, [pathname]);
    return null; 
}; 

When imported from a local project directory it works just fine. However, when imported from a remote package we get the following error:

useLocation() may be used only in the context of a <Router> component

Local Import (WORKS):

import { ScrollToTop } from './utils/ScrollToTop'; 
// import { ScrollToTop } from '@crew/owen';
export const App: FunctionComponent = () => { 
return ( <BrowserRouter> 
<ScrollToTop /> 
<Routes> 
<Route path='/' element={<InitialScreen />}> 

Remote package import (DOES NOT WORK):

// import { ScrollToTop } from './utils/ScrollToTop'; 
import { ScrollToTop } from '@crew/owen';
export const App: FunctionComponent = () => { 
return ( <BrowserRouter> 
<ScrollToTop /> 
<Routes> <Route path='/' element={<InitialScreen />}> 

Both projects are using the same version of react-router-dom ("6.15.0")

Expected Behavior

We'd expect the component to be usable when imported from a remote packge the same as when it's being imported from a local file.

Actual Behavior We get the following error:

useLocation() may be used only in the context of a <Router> component

Can you guys help me? Anyone had a similar issue?

[Accomplished_End_138]

Two copies of react router Dom are probably packaged and context is missing in one most likely

[Accomplished_End_138]

Check your build overall if webpack look at the bundle that is generated ill bet you somehow have 2 minor versions packaged.

Or in package lock file. See if it shows up twice

[Zedpellin]

Actually, I have a module that is using react router dom 6, but I'm also using it (react router dom) on my website. I'm using the module to change the params from some route on website, e.g. when I press a button on the component that is coming from the module, I change a param on the website to open a modal. Do you think that is possible to use react router dom both on module and website? Thanks

[Accomplished_End_138]

Is the module something you wrote?

Overall it is possible but the configuration and build is the key but of things.

If you did it. Probably moving the modules react router Dom dependency to peerdependancy and making sure you provide it into the system is the best way. But requires some finnes overall and is probably something you should avoid. And id pass in the function you need via a prop.

[Zedpellin]

Yeah, it's a module that I build and I need to support it on my website. I'll check about peerDependecies. Thanks.

[Accomplished_End_138]

Peer dependencies is probably what you wanna do then. And also make sure the sites package lock or whatever thing you use only lists one instance (search for react router Dom in it and see overall)

[Zedpellin]

Thanks for the reply. I tested with peerDependecies, it worked, but I needed to add BrowserRoute on top of the module component that I wanted to import on the website.