Issue using BrowserRouter for a project with a dependency on a local subproject that uses HashLink within

[adam-a]

Please see this and the usage -- I know this is a common issue, but I assure you I've done the proper setup (with the provider wrapping the root)

index.tsx:528 Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.
    at LinkWithRef (index.tsx:528:11)
    at renderWithHooks (react-dom.development.js:14985:18)
    at updateForwardRef (react-dom.development.js:17044:20)
    at beginWork (react-dom.development.js:19098:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
    at invokeGuardedCallback (react-dom.development.js:4056:31)
    at beginWork$1 (react-dom.development.js:23964:7)
    at performUnitOfWork (react-dom.development.js:22776:12)
    at workLoopSync (react-dom.development.js:22707:5)
LinkWithRef @ index.tsx:528
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22387
notify2 @ Subscription.js:15
notifyNestedSubs @ Subscription.js:85
handleChangeWrapper @ Subscription.js:90
dispatch @ redux.js:297
(anonymous) @ serializableStateInvariantMiddleware.ts:172
(anonymous) @ index.js:20
(anonymous) @ immutableStateInvariantMiddleware.ts:258
(anonymous) @ index.ts:458
dispatch @ redux.js:659
(anonymous) @ createAsyncThunk.ts:649
step @ index.js:32
(anonymous) @ index.js:32
fulfilled @ index.js:32
Promise.then (async)
step @ index.js:32
(anonymous) @ index.js:32
__async @ index.js:32
(anonymous) @ createAsyncThunk.ts:580
(anonymous) @ createAsyncThunk.ts:651
(anonymous) @ index.js:16
(anonymous) @ immutableStateInvariantMiddleware.ts:258
(anonymous) @ index.ts:458
dispatch @ redux.js:659
(anonymous) @ buildInitiate.ts:277
(anonymous) @ index.js:16
(anonymous) @ immutableStateInvariantMiddleware.ts:258
(anonymous) @ index.ts:458
(anonymous) @ buildHooks.ts:667
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
Show 57 more frames
8react-dom.development.js:20085 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:4003/node_modules/.vite/deps/react-router-hash-link.js?v=626609fe:1496:5)
    at http://localhost:4003/node_modules/.vite/deps/react-router-hash-link.js?v=626609fe:1979:22
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at SouvenirCardWrapper (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/features/SouvenirCards/SouvenirCardWrapper.tsx:71:3)
    at SouvenirCard (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/features/SouvenirCards/SouvenirCard.tsx:49:3)
    at SouvenirCards (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/features/SouvenirCards/SouvenirCards.tsx:36:3)
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at _c2 (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/Layout/Column.tsx:27:3)
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at Container (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/Layout/Container.tsx:27:3)
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at MyCollection (http://localhost:4003/@fs/Users/.../ElemintMonoRepo/web_ui/src/uiComponents/MyCollection/MyCollection.tsx:60:3)
    at div
    at http://localhost:4003/node_modules/.vite/deps/chunk-AVXPTCVH.js?v=626609fe:1265:45
    at _c2 (http://localhost:4003/src/uiComponents/Layout/Column.tsx:27:3

Usage:

In parent project:

    <QueryClientProvider client={queryClient}>
                  <Router basename={APP_PATH}>
                    <Header />
                    <Main component={<Switcher />} />
                    <Footer />
                    <ReactQueryDevtools />
                  </Router>

Within the Main component, there is another component which does the following:

import { HashLink as Link } from 'react-router-hash-link';


const CustomLink = styled(Link, {
  shouldForwardProp: isPropValid,
})<StyledCustomLinkProps>`
  ${(props) => customLinkStyling(props.theme.colors.grey, props.backgroundUrl)};
  ${(props) => props.isGrid && wrapperGridStyling};
`;

...

const SouvenirCardWrapper = ({
  dynamicLinks,
  souvenir,
  children,
  isGrid,
  testId,
}: SouvenirCardWrapperProps): JSX.Element => {
  const clickContextMenu = (e: React.MouseEvent<HTMLUnknownElement>) => {
    e.preventDefault();
    return false;
  };

  const link = `/souvenir/${souvenir.shortName}/${souvenir.tokenId}#`;

  return (someStuff ? (
    <CustomLink
      isGrid={isGrid}
      to={link}
      key={someKey}
      data-test-id={testId}
    >
... irrelevant below

The parent resides in source/parentProject and the child resides in source/childProject (it is a custom dependency with functional components)

To me, it seems like the BrowserRouter provider is not correctly passing down browser information to that internal child library within that component

Does anyone have any pointers here?

Thanks in advance

[thecodeguru360]

I'm facing similar issue, did you find any work around?

[Admayah]

@lahashmi you have to wrap your app component with BrowserRouter, so you can use the Link component.