Problem with react routing issue in Kibana Plugin

Elastic Stack Kibana
1

I am developing a Kibana Plugin. I have got an error like this

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1590)
    at useMemo (react.development.js:1642)
    at Provider (Provider.js:22)
    at renderWithHooks (react-dom.development.js:12839)
    at mountIndeterminateComponent (react-dom.development.js:14814)
    at beginWork (react-dom.development.js:15419)
    at performUnitOfWork (react-dom.development.js:19106)
    at workLoop (react-dom.development.js:19146)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    react-dom.development.js:16911 The above error occurred in the component:
    in Provider
    in PseudoLocaleWrapper (created by I18nProvider)
    in IntlProvider (created by I18nProvider)
    in I18nProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

after I set up my custom router and store with connected-react-router package for my plugin

import React from 'react';
import { uiModules } from 'ui/modules';
import chrome from 'ui/chrome';
import { render, unmountComponentAtNode } from 'react-dom';
import { I18nProvider } from '@kbn/i18n/react';
import { ConnectedRouter } from 'connected-react-router';
import configureStore ,{history} from './store/store';
import { Provider } from 'react-redux';

import 'ui/autoload/styles';
import Main from './components/main/main';

const app = uiModules.get('apps/wmdcUserDashboard');
const store = configureStore();

app.config($locationProvider => {
    $locationProvider.html5Mode({
        enabled: false,
        requireBase: false,
        rewriteLinks: false,
    });
});
app.config(stateManagementConfigProvider =>
  stateManagementConfigProvider.disable(),
);

function RootController($scope, $element, $http) {
    const domNode = $element[0];

// render react to DOM with Dom Node aka Root Node
    render(
      <I18nProvider>
          <Provider store={store}>
              <ConnectedRouter history={history}>
                  <Main/>
              </ConnectedRouter>
          </Provider>
      </I18nProvider>,
      domNode,
    );

    $scope.$on('$destroy', () => {
        unmountComponentAtNode(domNode);
    });
}

chrome.setRootController('wmdcUserDashboard', RootController);

It seems like I have more than one react package in my app.
Should I install npm packages in the plugin directory ? Or should I install it in the Kibana directory?
If anyone has any suggestions about routing in the custom plugin , please suggest me best approaches . Thank you.

2

@jbudz ops team question. Thanks!

3

Does your app import its own version of react? Might be best to just use the version that ships with Kibana.

Here is an example plugin that sets up a react router that you can follow

1 Like
4

Thanks , I solved this

5

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