useNavigate() and useSearchParams() gives Object(...) is not a function error


I am developing a custom plugin using React in Kibana main branch (8.9).

When I use useSearchParams() or useNavigate() from react-router v6, I get an error in the browser saying Object(...) is not a function. But works well with useParams(). The code is not complicated. It is just simple function call to see if the above 2 works.

Stack trace of error:

Object(...) is not a function
 Overview @
 <unknown> @
 <unknown> @
 EuiPageSection @
 <unknown> @
 EuiPageBody @
 <unknown> @
 EuiPage @
 ErrorBoundaryClass @
 ConnectFunction @
 Route @
 Route @
 Router @
 BrowserRouter @
 Provider @
 ReduxProvider @
 Provider @

The code:

import React, { Fragment} from 'react';
import {
} from 'react-router-dom';

export const Overview = () => {
  const navigate = useNavigate();
  // const [searchParams, setsearchParams] = useSearchParams(); 
  // console.log(searchParams);

  return (
      <button onClick={() => navigate('orders')}>
        Go to orders

Moreover, I am using a different version of react-router, than the one being using by the kibana parent folder.
Kibana => React-router v5
Plugin => React-router v6
Please refer to this question (Is it okay to use different react-router version in plugin?)


Can anyone pls look into this?

Been stuck on this for a couple of weeks now

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.