Uncaught TypeError: Cannot destructure property 'navigator' of '(0 , import_react.useContext)(...)' as it is null.

[nigellima]

Description

I'm using React 18 with node 18 too (I have tried with 16 and 17 versions too). When using the ReactRouter6Adapter I'm getting this error:

Uncaught TypeError: Cannot destructure property 'navigator' of '(0 , import_react.useContext)(...)' as it is null.

import { Route, Routes } from 'react-router-dom';
import { QueryParamProvider } from 'use-query-params';
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';

function App() {
  return (
    <div>
      <QueryParamProvider adapter={ReactRouter6Adapter}>
        <ClientProvider>
          <AuthProvider>
            <Routes>
              <Route path="/login" element={<Login />}></Route>
......
            </Routes>
          </AuthProvider>
        </ClientProvider>
      </QueryParamProvider>
    </div>
  );
}

export default App;



import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </React.StrictMode>,
);

Versions:
node: v18.16.1
react: ^18.2.0
react-router-dom: ^6.14.1
use-query-params: ^2.2.1

I've reinstalled everything, cleared cache... I tried creating a reproducible environment, but it worked fine there. So am I missing something here?

[hoetmaaiers]

I bmped into the same issue. Ensuring the QueryParamsProvider is inside the createBrowserRouter context should work fine.

My solution was this:

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <QueryParamProvider
        adapter={ReactRouter6Adapter}
        options={{
          searchStringToObject: queryString.parse,
          objectToSearchString: queryString.stringify,
        }}
      >
        <Outlet />
      </QueryParamProvider>
    ),
    children: [
      {
        path: '/',
        element: <LandingPage />,
      },
      ...

[nigellima]

I bmped into the same issue. Ensuring the QueryParamsProvider is inside the createBrowserRouter context should work fine.

My solution was this:

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <QueryParamProvider
        adapter={ReactRouter6Adapter}
        options={{
          searchStringToObject: queryString.parse,
          objectToSearchString: queryString.stringify,
        }}
      >
        <Outlet />
      </QueryParamProvider>
    ),
    children: [
      {
        path: '/',
        element: <LandingPage />,
      },
      ...

This is so weird. Even moving my routes to use createBrowserRouter is throwing the same error (now showing up in the page instead of console.error). The only thing I could think of was some kind of dependency issue, but I've reinstalled everything

[nigellima]

Ok. Now it worked specifically with the version of react-router-dom 6.10.0. No idea why

[hoetmaaiers]

For your reference, I use react-router(-dom) `6.14.0'.

[rabah]

So when I used [email protected] I started getting the same error, even if the QueryParamProvider is used inside the RouterProvider. I downgraded to [email protected] and it worked fine. Anyone else having this issue??

[whityha]

I used use-query-params with createBrowserRouter.

const router = createBrowserRouter([
    {
        path: '/',
        element: <LayoutApp />,
        children: ROUTES.map((route) => {
            return {
                path: route.path,
                element: route.element,
            };
        }),
    },
]);

export function AppRouter() {
    return <RouterProvider router={router} />;
}

export const AppProvider = ({ children }: { children: React.ReactNode }) => {
    return (
        <React.StrictMode>
            <QueryParamProvider adapter={ReactRouter6Adapter}>
                <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </QueryParamProvider>
        </React.StrictMode>
    );
};

export const App = () => {
    return (
        <AppProvider>
            <AppRouter />
        </AppProvider>
    );
};

and I get same problems after that

[wojoti]

I've tried changing versions of react-router-dom and unfortunately it didn't change anything for me

[szpytfire]

Anyone else having this issue?

The last version of react-router / react-router-dom that doesn't seem to have the issue is 6.9.0. Anything after that and I start seeing this error.

I'm using a MemoryRouter.

[dewbjorn]

In my case I just needed Outlet to be a direct child of QueryParamProvider.

<OutletWrapper>
	<QueryParamProvider adapter={ReactRouter6Adapter}>
		<Outlet />
	</QueryParamProvider>
</OutletWrapper>

[rabah]

So when I used [email protected] I started getting the same error, even if the QueryParamProvider is used inside the RouterProvider. I downgraded to [email protected] and it worked fine. Anyone else having this issue??

Just to confirm, im not having any issues anymore, might have been a react-router-dom issue, that was solved with the latest version.

[kevin-nguyen-mirvac]

A workaround for me was to just copy the whole adapter code since the dependencies is quite small and by co-locating it on the same file as the provider, the error doesn't throw

https://github.com/pbeshai/use-query-params/blob/master/packages/use-query-params-adapter-react-router-6/src/index.ts