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

Elastic Stack Kibana
1

Hi,

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 @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:12459
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPageSection @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:129866
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPageBody @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128929
 <unknown> @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:166030
 EuiPage @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:128783
 ErrorBoundaryClass @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:8937
 ConnectFunction @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:6572
 Route @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360863
 Route @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:1270
 Router @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360492
 BrowserRouter @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.dll.js:360097
 Provider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:6277
 ReduxProvider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/my_plugin/1.0.0/my_plugin.chunk.0.js:14466
 Provider @ http://10.40.0.14:5600/ieu/9007199254740991/bundles/plugin/kibanaReact/1.0.0/kibanaReact.plugin.js:1794

The code:

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

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

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

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?)

Thanks

2

Can anyone pls look into this?

Been stuck on this for a couple of weeks now

3

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