Upgrade to React@18 - Githubissues

patrykkopycinski commented 2 years ago

[bazel] warning " > @elastic/eui@60.3.0" has incorrect peer dependency "@types/react@^16.9 || ^17.0".
[bazel] warning " > @elastic/eui@60.3.0" has incorrect peer dependency "@types/react-dom@^16.9 || ^17.0".
[bazel] warning " > @elastic/eui@60.3.0" has incorrect peer dependency "react@^16.12 || ^17.0".
[bazel] warning " > @elastic/eui@60.3.0" has incorrect peer dependency "react-dom@^16.12 || ^17.0".
[bazel] warning " > @elastic/eui@60.3.0" has incorrect peer dependency "typescript@~4.5.3".
[bazel] warning " > react-beautiful-dnd@13.1.0" has incorrect peer dependency "react@^16.8.5 || ^17.0.0".
[bazel] warning " > react-beautiful-dnd@13.1.0" has incorrect peer dependency "react-dom@^16.8.5 || ^17.0.0".
[bazel] warning "@elastic/eui > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
[bazel] warning "@elastic/eui > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
[bazel] warning "@elastic/eui > react-input-autosize@3.0.0" has incorrect peer dependency "react@^16.3.0 || ^17.0.0".
[bazel] warning "@elastic/eui > react-virtualized-auto-sizer@1.0.6" has incorrect peer dependency "react@^15.3.0 || ^16.0.0-alpha || ^17.0.0".
[bazel] warning "@elastic/eui > react-virtualized-auto-sizer@1.0.6" has incorrect peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha || ^17.0.0".
[bazel] warning "@elastic/eui > react-window@1.8.6" has incorrect peer dependency "react@^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning "@elastic/eui > react-window@1.8.6" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning "@elastic/eui > react-beautiful-dnd > use-memo-one@1.1.2" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @mapbox/mapbox-gl-rtl-text@0.2.3" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0".
[bazel] warning " > react-ace@7.0.5" has incorrect peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0".
[bazel] warning " > react-ace@7.0.5" has incorrect peer dependency "react-dom@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0".
[bazel] warning " > react-intl@2.8.0" has incorrect peer dependency "react@^0.14.9 || ^15.0.0 || ^16.0.0".
[bazel] warning " > react-monaco-editor@0.41.2" has incorrect peer dependency "@types/react@^17.x".
[bazel] warning " > react-monaco-editor@0.41.2" has incorrect peer dependency "react@^17.x".
[bazel] warning " > react-popper-tooltip@3.1.1" has incorrect peer dependency "react@^16.6.0 || ^17.0.0".
[bazel] warning " > react-popper-tooltip@3.1.1" has incorrect peer dependency "react-dom@^16.6.0 || ^17.0.0".
[bazel] warning "react-popper-tooltip > react-popper@2.2.4" has incorrect peer dependency "react@^16.8.0 || ^17".
[bazel] warning "react-router > mini-create-react-context@0.4.1" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning " > react-shortcuts@2.1.0" has incorrect peer dependency "react@^0.14.8 || ^15 || ^16".
[bazel] warning " > react-shortcuts@2.1.0" has incorrect peer dependency "react-dom@^0.14.8 || ^15 || ^16".
[bazel] warning " > react-tiny-virtual-list@2.2.0" has incorrect peer dependency "react@15.x || 16.x".
[bazel] warning " > react-use@15.3.8" has incorrect peer dependency "react@^16.8.0  || ^17.0.0".
[bazel] warning " > react-use@15.3.8" has incorrect peer dependency "react-dom@^16.8.0  || ^17.0.0".
[bazel] warning " > react-virtualized@9.22.3" has incorrect peer dependency "react@^15.3.0 || ^16.0.0-alpha".
[bazel] warning " > react-virtualized@9.22.3" has incorrect peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha".
[bazel] warning " > react-vis@1.8.2" has incorrect peer dependency "react@0.14.x - 16.x".
[bazel] warning " > recompose@0.30.0" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
[bazel] warning " > @bazel/typescript@4.6.2" has incorrect peer dependency "typescript@>=3.0.0 <4.4.0".
[bazel] warning " > @elastic/eslint-plugin-eui@0.0.2" has incorrect peer dependency "eslint@>=5, <7".
[bazel] warning "@elastic/github-checks-reporter > @octokit/rest > @octokit/plugin-request-log@1.0.4" has unmet peer dependency "@octokit/core@>=3".
[bazel] warning " > @storybook/addons@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/addons@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/api@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/api@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/components@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/components@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/theming@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/theming@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/addons > @storybook/router@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/addons > @storybook/router@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/components > react-textarea-autosize@8.3.3" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
[bazel] warning " > @storybook/core-common@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/core-common@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-controls > @storybook/store@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-controls > @storybook/store@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @mdx-js/react@1.6.22" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/core@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/core@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/preview-web@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/preview-web@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/source-loader@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/source-loader@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/client-api@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/client-api@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > @storybook/core-client@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > @storybook/core-client@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui > react-helmet-async@1.1.2" has incorrect peer dependency "react@^16.6.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui > react-helmet-async@1.1.2" has incorrect peer dependency "react-dom@^16.6.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server > @storybook/manager-webpack4@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server > @storybook/manager-webpack4@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-knobs > react-select@3.2.0" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-knobs > react-select@3.2.0" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > preact-render-to-string@5.1.19" has unmet peer dependency "preact@>=10".
[bazel] warning "@storybook/addon-storyshots > react-test-renderer@17.0.2" has incorrect peer dependency "react@17.0.2".
[bazel] warning " > @storybook/react@6.4.22" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/react@6.4.22" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/testing-react@1.2.4" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @testing-library/react@12.1.5" has incorrect peer dependency "react@<18.0.0".
[bazel] warning " > @testing-library/react@12.1.5" has incorrect peer dependency "react-dom@<18.0.0".
[bazel] warning " > @wojtekmaj/enzyme-adapter-react-17@0.6.7" has incorrect peer dependency "react@^17.0.0-0".
[bazel] warning " > @wojtekmaj/enzyme-adapter-react-17@0.6.7" has incorrect peer dependency "react-dom@^17.0.0-0".
[bazel] warning "@wojtekmaj/enzyme-adapter-react-17 > @wojtekmaj/enzyme-adapter-utils@0.1.4" has incorrect peer dependency "react@^17.0.0-0".

elasticmachine commented 2 years ago

Pinging @elastic/kibana-operations (Team:Operations)

jbudz commented 1 year ago

Dropping the operations team, we have a limited intersection with client code and aren't best suited for managing this upgrade.

elasticmachine commented 1 year ago

Pinging @elastic/appex-sharedux (Team:SharedUX)

elasticmachine commented 1 year ago

Pinging @elastic/kibana-core (Team:Core)

mistic commented 1 year ago

@stephmilovic just raised our attention to the problems created by the false positive errors for the setState on unmounted components https://github.com/facebook/react/pull/22114#issuecomment-900721521

While react does have no owner so far, let's see where we can get with a small exploration to address this once we have some time.

As a short term fix, at least filtering those errors for the current version we are in would be helpful.

legrego commented 4 months ago

We should consider prioritizing this, now that React 19 is in beta: https://19.react.dev/. Once 19 is GA, the likelihood that fixes will be backported to 17 is even lower than today.

pgayvallet commented 4 months ago

@legrego then I think the mandatory first step would be to find an actual owner for this issue.

Atm, neither @elastic/kibana-operations nor @elastic/kibana-core agreed to take ownership on the issue,

Operations, because, I quote

we have a limited intersection with client code and aren't best suited for managing this upgrade.

And Core, because, I quote myself

Core is UI framework agnostic, so upgrading an UI framework seems outside of our responsibilities and expertise.

I'll add the @elastic/appex-sharedux team in the look, given their label was removed from the issue without any comment or explanation, even if it feels like they might potentially be the right owner for the job?

petrklapka commented 4 months ago

@pgayvallet - Thanks Pierre! I agree, this is right in our wheelhouse. I pinged the tech leads on our public channel to start a chat about how best to get this rolling.

vadimkibana commented 3 months ago

React v19 will be released soon, with lots of great features. However, before that we need to upgrade to v18 first.

React v18.3 version is available now, which is the same as v18.2 but will show a bunch of warnings and deprecations, which need to be solved before upgrading to v19.

For Kibana it means that the upgrade plan could be as follows:

First upgrade to 18.2 just to get the v18 in.
Then upgrade to 18.3, which should work the same, but might overwhelm developers with all the v19 warnings and deprecations.
Resolve the v18.3 warning and deprecation messages.
Upgrade to v19, once it is out end of summer.

Dosant commented 2 months ago

We are currently working on upgrading to React 18. The new version has a compatibility mode, allowing us to upgrade the package without immediately switching to the new runtime. We have briefly tried this mode with Kibana, and while it mostly works, there are still some runtime issues that need to be addressed.

However in @types/react@18 a lot of improvements and fixes have been made that caused a lot of type failures in Kibana, so we need to address or mute those first before doing the package upgrade. We’re already halfway through and there is light at the end of the tunnel.

So we propose we work on the upgrade in two stages:

Stage 1: Upgrade the packages to ~18.2.0

Upgrade react, react-dom, @types/react, and @types/react-dom to version ~18.2.0.

While upgrading, fix any breaking type issues. We are already making great progress on this (thanks to @patrykkopycinski for making a lot of progress):

Address any runtime issues caused by the upgrade:

React’s useId is not compatible with document.querySelector('#id') https://github.com/elastic/kibana/pull/191632
Warnings from the styled-components package—this may require an update.
Deduplicate or mute warnings related to the old ReactDOM.render API (compatibility mode).
https://github.com/elastic/eui/issues/8018
similar issue with monaco wrapper https://codesandbox.io/p/sandbox/monaco-3nxttv, set performance to 20x slowdown and type fast
Any other runtime issues that arise.

After completing these steps, we will have upgraded to React 18 packages while still running in the "old" React 17 mode.

Stage 2: Switching to the New React 18 Runtime

The second stage involves adopting the new APIs to switch to the new React 18 runtime. The current plan is for each team to handle this transition independently for their specific apps and components. We will look into this stage in more detail as we get closer and provide some guidance for the teams.

elastic / kibana

Upgrade to React@18 #138222