[Bug]: Uncaught TypeError: Cannot destructure property 'basename' of 'React.useContext(...)' as it is null.

[kadiyamsuresh]

What version of React Router are you using?

6

Steps to Reproduce

Hi Team,

This issue is in continuation to #11162

I have created an application in codesandbox with our components library which contains wrapper of all the standard components like Link. Link component of react-router-dom v6 is breaking the application, getting the below error in console.

To reproduce issue, see below URL.
codesandbox URL: https://codesandbox.io/p/devbox/tsc8ph?file=%2Fpackage.json%3A26%2C27

Expected Behavior

Link component from React-router-dom v6 should work.

Actual Behavior

Link component from React-router-dom v6 is breaking application

[brophdawg11]

It looks like you have inlined all of React Router into your component library file, which is where the duplicate contexts are coming from. In componentsLibrary/index.esm.jsx, these chunks of code should not be inlined and should come from a react-router-dom import:

const NavigationContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== "production") {
  NavigationContext.displayName = "Navigation";
}
....
function useHref(to, _temp) { ... }
...
const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) { ... }

[khaledtag98]

Any workaround available to share the same Router instance between application and library?

[sureshsumtotal]

To maintain same instance for both places we need to update package.json file in library repository.

Should add “react-router-dom” library under “peerDependencies” section.

Should not add “react-router-dom” library under “dependencies” section.

Should add “react-router-dom” library under “resolutions” section to maintain same version in both repositories.

“react-router-dom” should not be part of library bundles.