Is it okay to use different react-router version in plugin?

Elastic Stack Kibana
1

Hi,

I am developing a custom plugin in React.
I am using a different version of React Router in my plugin, than the one being used by kibana.

Kibana - react-router v5
Plugin - react-router v6

versions.json in kibana source code folder

{
  "notice": "This file is not maintained outside of the main branch and should only be used for tooling.",
  "versions": [
    {
      "version": "8.9.0",
      "branch": "main",
      "currentMajor": true,
      "currentMinor": true
    },
    {
      "version": "8.8.2",
      "branch": "8.8",
      "currentMajor": true,
      "previousMinor": true
    },
    {
      "version": "7.17.11",
      "branch": "7.17",
      "previousMajor": true
    }
  ]
}

Router packages in package.json of Kibana folder

cat ../../package.json | grep router
    "@kbn/core-http-router-server-internal": "link:packages/core/http/core-http-router-server-internal",
    "@kbn/shared-ux-router": "link:packages/shared-ux/router/impl",
    "@kbn/shared-ux-router-mocks": "link:packages/shared-ux/router/mocks",
    "@kbn/shared-ux-router-types": "link:packages/shared-ux/router/types",
    "@kbn/typed-react-router-config": "link:packages/kbn-typed-react-router-config",
    "react-router": "^5.2.0",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "@kbn/core-http-router-server-mocks": "link:packages/core/http/core-http-router-server-mocks",
    "@types/react-router": "^5.1.7",
    "@types/react-router-config": "^5.0.2",
    "@types/react-router-dom": "^5.1.5",

Router packages in package.json of my plugin folder

"dependencies": {
    "axios": "^1.3.4",
    "file-saver": "^2.0.5",
    "node-localstorage": "^2.2.1",
    "react-full-screen": "^1.1.1",
    "react-redux": "^8.0.5",
    "react-router": "^6.12.1",
    "react-router-dom": "^6.12.1"
  },
  "devDependencies": {
    "@types/node-localstorage": "^1.3.0",
    "stacktrace-parser": "^0.1.10"
  }

Thanks

2

Can anyone pls look into this? Can I use different versions of react-router?

3

Hi @Sheereen,

Sorry for the late reply. We are currently in the preparation process before update to react-router v6 on the main branch, e.g. this PR
There is no ETA and it might take a while due to the amount of changes and required verification on our side.

If you decide to develop your plugin with react-router v6 already now there are chances things won't work properly on your end and you have to wait for us to finish the updates.

In the end, it is up to you to take a risk or use react-router v5 for now and make updates later.

Best regards, Dima

1 Like
4

Okay... Thanks a lot for the reply and clarification

In that case, using v5 would be better. Becoz I am facing some issues in having the history of my plugin in sync with Kibana history.

Moreover, just to bring to your attention, in routing examples (Routing, Navigation and URL | Kibana Guide [8.8] | Elastic), they are using a '@kbn/shared-ux-router' for setting up the routes (kibana/test/plugin_functional/plugins/core_plugin_a/public/application.tsx at 8.8 · elastic/kibana · GitHub) - which is not inclded in package.json of Kibana 8.5.3.

Thanks

5

'kbn/shared-ux-router' is a relatively new change kibana#150357 and should help solving the issue of picking the right dependency yourself.
I don't know much details here, but most likely due to change complexity it wasn't backported and is available only in Kibana 8.8.0 & above.

It might be an extra challenge, if you would like your plugin to work on the earlier Kibana version.

Regards, Dima

1 Like
6

I was working on 8.5.3 initially, but then found even though routing example in the same is using @kbn/shared-ux-router, it is not included in 8.5.3 package.json. So I moved to 8.8.1, and is planning to continue on the same.

In that case, based on what u said and my understanding, it will be better to use @kbn/shared-ux-router and react-router-v5 right?

7

It will be better to use solely @kbn/shared-ux-router.
Moreover, you should see lint error on trying to import from react-router-dom:

Please use @kbn/shared-ux-router instead

1 Like
8

Thanks a lot... had been stuck on this for a while

9

According to Routing, Navigation and URL | Kibana Guide [8.8] | Elastic, we have to use BrowserRouter. But in the example plugin(Routing, Navigation and URL | Kibana Guide [8.8] | Elastic), it is shown to use Router.

Which one is a better approach?

10

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