Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to React@18 #138222

Open
patrykkopycinski opened this issue Aug 6, 2022 · 10 comments
Open

Upgrade to React@18 #138222

patrykkopycinski opened this issue Aug 6, 2022 · 10 comments
Assignees
Labels
old Used to help sort old issues on GH Projects which don't support the Created search term. React@18 Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc Team:Operations Team label for Operations Team Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@patrykkopycinski
Copy link
Contributor

[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "@types/react@^16.9 || ^17.0".
[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "@types/react-dom@^16.9 || ^17.0".
[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "react@^16.12 || ^17.0".
[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "react-dom@^16.12 || ^17.0".
[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "typescript@~4.5.3".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^16.8.5 || ^17.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^16.8.5 || ^17.0.0".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react@^16.3.0 || ^17.0.0".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react@^15.3.0 || ^16.0.0-alpha || ^17.0.0".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha || ^17.0.0".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning "@elastic/eui > [email protected]" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning "@elastic/eui > react-beautiful-dnd > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @mapbox/[email protected]" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^0.14.9 || ^15.0.0 || ^16.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "@types/react@^17.x".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^17.x".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^16.6.0 || ^17.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^16.6.0 || ^17.0.0".
[bazel] warning "react-popper-tooltip > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17".
[bazel] warning "react-router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^0.14.8 || ^15 || ^16".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^0.14.8 || ^15 || ^16".
[bazel] warning " > [email protected]" has incorrect peer dependency "[email protected] || 16.x".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^16.8.0  || ^17.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^16.8.0  || ^17.0.0".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^15.3.0 || ^16.0.0-alpha".
[bazel] warning " > [email protected]" has incorrect peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha".
[bazel] warning " > [email protected]" has incorrect peer dependency "[email protected] - 16.x".
[bazel] warning " > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
[bazel] warning " > @bazel/[email protected]" has incorrect peer dependency "typescript@>=3.0.0 <4.4.0".
[bazel] warning " > @elastic/[email protected]" has incorrect peer dependency "eslint@>=5, <7".
[bazel] warning "@elastic/github-checks-reporter > @octokit/rest > @octokit/[email protected]" has unmet peer dependency "@octokit/core@>=3".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/addons > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/addons > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-a11y > @storybook/components > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-actions > [email protected]" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-controls > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-controls > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @mdx-js/[email protected]" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui > [email protected]" has incorrect peer dependency "react@^16.6.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/builder-webpack4 > @storybook/ui > [email protected]" has incorrect peer dependency "react-dom@^16.6.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-docs > @storybook/core > @storybook/core-server > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-knobs > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-knobs > [email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning "@storybook/addon-storyshots > [email protected]" has unmet peer dependency "preact@>=10".
[bazel] warning "@storybook/addon-storyshots > [email protected]" has incorrect peer dependency "[email protected]".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
[bazel] warning " > @storybook/[email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
[bazel] warning " > @testing-library/[email protected]" has incorrect peer dependency "react@<18.0.0".
[bazel] warning " > @testing-library/[email protected]" has incorrect peer dependency "react-dom@<18.0.0".
[bazel] warning " > @wojtekmaj/[email protected]" has incorrect peer dependency "react@^17.0.0-0".
[bazel] warning " > @wojtekmaj/[email protected]" has incorrect peer dependency "react-dom@^17.0.0-0".
[bazel] warning "@wojtekmaj/enzyme-adapter-react-17 > @wojtekmaj/[email protected]" has incorrect peer dependency "react@^17.0.0-0".
@botelastic botelastic bot added the needs-team Issues missing a team label label Aug 6, 2022
@patrykkopycinski patrykkopycinski added the Team:Operations Team label for Operations Team label Aug 6, 2022
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Aug 6, 2022
@jbudz
Copy link
Member

jbudz commented Mar 21, 2023

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

@jbudz jbudz added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) and removed Team:Operations Team label for Operations Team labels Mar 21, 2023
@elasticmachine
Copy link
Contributor

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

@jbudz jbudz removed the Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) label Mar 21, 2023
@botelastic botelastic bot added the needs-team Issues missing a team label label Mar 21, 2023
@wayneseymour wayneseymour added the Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc label Mar 31, 2023
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Mar 31, 2023
@mistic
Copy link
Member

mistic commented Aug 7, 2023

@stephmilovic just raised our attention to the problems created by the false positive errors for the setState on unmounted components facebook/react#22114 (comment)

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.

@afharo afharo changed the title Updgrade to React@18 Upgrade to React@18 Aug 8, 2023
@pgayvallet pgayvallet added the Team:Operations Team label for Operations Team label Aug 23, 2023
@legrego
Copy link
Member

legrego commented Jul 15, 2024

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
Copy link
Contributor

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

@pgayvallet pgayvallet added the Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) label Jul 16, 2024
@petrklapka
Copy link
Member

@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
Copy link
Contributor

vadimkibana commented Aug 12, 2024

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.

image

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

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

Dosant added a commit that referenced this issue Aug 28, 2024
## Summary

Prep work for React@18 bump
#138222

In React@18 `useCallback` types has changed that introduced breaking
changes:
DefinitelyTyped/DefinitelyTyped#46691

Fixed using:

https://github.com/eps1lon/types-react-codemod?tab=readme-ov-file#usecallback-implicit-any

**Tried to do my best with fixing the types, but if you disagree or have
a better idea how it should be solved feel free to suggest changes or
commit directly to the branch 🙏**

---------

Co-authored-by: Sergi Massaneda <[email protected]>
Co-authored-by: Sébastien Loix <[email protected]>
Co-authored-by: Nick Peihl <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>
Co-authored-by: Felix Stürmer <[email protected]>
Co-authored-by: nickofthyme <[email protected]>
Co-authored-by: Davis McPhee <[email protected]>
Co-authored-by: Vitalii Dmyterko <[email protected]>
Co-authored-by: Maxim Palenov <[email protected]>
Co-authored-by: Christos Nasikas <[email protected]>
Co-authored-by: Anton Dosov <[email protected]>
@Dosant Dosant self-assigned this Sep 4, 2024
Dosant added a commit that referenced this issue Sep 4, 2024
## Summary

This is a prep for #138222 and
follow up to #182344. These are
post-merge leftovers and new instances from the previous
[run](#182344)

In React@18 useCallback types have changed that introducing breaking
changes:
DefinitelyTyped/DefinitelyTyped#46691

Found potential issues using:

https://github.com/eps1lon/types-react-codemod?tab=readme-ov-file#usecallback-implicit-any

I tried to do my best to fix the type where possible, but there are some
complicated cases where I kept `any` after some struggling. Please feel
free to push improvements directly.

---------
Co-authored-by: Jatin Kathuria <[email protected]>
@Dosant
Copy link
Contributor

Dosant commented Sep 5, 2024

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:

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.

eokoneyo added a commit that referenced this issue Sep 5, 2024
## Summary

This PR fixes an error that was discovered ahead of the react 18
upgrade(#138222).

Why are we concerned about this? Whilst `useId` isn't directly used in
our codebase, it is utilized by EUI's `useGeneratedHtmlId` hook, see
https://github.com/elastic/eui/blob/v95.8.0/packages/eui/src/services/accessibility/html_id_generator.ts#L73-L74,
the useId hook returns a string that is bounded by colons; if passed to
`document.querySelector` as an ID selector, they would cause errors (see
facebook/react#26839). As a result, instances
where these IDs are being used with `querySelector` have been modified
to instead use an attribute selector equivalent to the corresponding ID
selector.

<!-- ### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
-->

---------

Co-authored-by: Elastic Machine <[email protected]>
Dosant added a commit that referenced this issue Sep 6, 2024
## Summary

Part of #138222

This is one of the issues that `@types/react@18` upgrade highlights and
that needs to be addressed with or before the upgrade.

`field.helpText` is `ReactNode`, a function is not a valid `ReactNode`,
but `@types/react@17` allowed a function. That is why `typeof
field.helpText === 'function' ? field.helpText() : field.helpText`
doesn't fail with `@17`, but fails with `@18` as `field.helpText is not
callable, as never is not callable`. You can check the types with
@types/react@18 yourself here
#191738

It looks like the lazy `helpText` isn't needed apart from a hack for
index management where documentation service is used as part of helpText
that could be not available yet.

To keep it supported, I specifically, allowed a function that returns a
ReactNode for `helpText` on `FieldConfig`, but to make consumption clean
and to now break other places `useField` will call it and pass just a
`ReactNode` down
Dosant added a commit that referenced this issue Sep 9, 2024
## Summary

Part of #138222

in @types/react@18 types [have become more
strict](DefinitelyTyped/DefinitelyTyped#56210).
This PR addresses a bunch of easy fixes. The most common are:

### 1 Removal of implicit children

For components that do implement children but relied on their implicit
declaration from React.FunctionComponent or React.Component:

```diff
 interface Props {
+  children?: React.ReactNode;
 }

 class SomeClassComponents React.Component<Props> {
   render() {
     return  <div>{this.props.children}</div>
   }
 }
 const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div>
```

or 

```diff
- const SomeFunctionComponent: React.FunctionComponent<Props> = props => <div>{props.children}</div>
+ const SomeFunctionComponent: React.FunctionComponent<React.PropsWithChildren<Props>> = props => <div>{props.children}</div>
```


*Note 1:*
The most common change occurs in unit tests where `renderHook` and
`wrapper` are used. I had to re-type the props so that `children` were
there

```diff
const { result } = renderHook(
         () => {
           return useLicense();
         },
         {
-           wrapper: ({ children }) => (
+           wrapper: ({ children }: React.PropsWithChildren<{}>) => (
             <TestProviders license={license}>{children}</TestProviders>
           ),
         }
       );
```

```diff
- const { result } = renderHook<GetCasesColumn, UseCasesColumnsReturnValue>(
+ const { result } = renderHook<React.PropsWithChildren<GetCasesColumn>, UseCasesColumnsReturnValue>(
       () => useCasesColumns(defaultColumnArgs),
       {
         wrapper: ({ children }) => <TestProviders>{children}</TestProviders>,
       }
     );
```



*Note 2:*
With @types/react@17 the components that don't have any props apart from
`children` I had to use `React.PropsWithChildren<{}>`, whereas in
@types/react@18 the argument becomes optional, so it can be omitted, and
type simpler with `React.PropsWithChildren` without an argument



### 2 `this.context` becomes `unknown` (was `any`)

In a couple of places where `this.context` is used, I had to type it

### 3 `ComponentType` from enzyme is no longer compatible with
`ComponentType` from react

This one is a bummer, but where `wrappingComponent` with enzyme is used
I had to cast it to type from `enzyme`

```diff
- import { mount } from 'enzyme'
+ import { mount, ComponentType } from 'enzyme'

 wrapper = mount(<ClosureOptions {...props} />, {
-       wrappingComponent: TestProviders,
+       wrappingComponent: TestProviders as ComponentType<{}>,
});
```
Dosant added a commit that referenced this issue Sep 12, 2024
## Summary

Part of #138222

in @types/react@18 types
DefinitelyTyped/DefinitelyTyped#56210. This PR
addresses a bunch of remaining fixes **(hopefully the last mass ping PR
like this)** The most common are:


### 1 Objects are no longer considered a valid ReactNode

In types@17 the ReactNode typing was too soft, it allowed objects and
functions being passed as ReactNode, e.g.

```
let obj: React.ReactNode = {};
let func: React.ReactNode = () => {};
```

This was by mistake, and this PR mutes most of such cases by simply
casting to a `string` or `ReactNode`.
In some cases, it is worth to follow up and address the raised issues in
a better way (see in comments)


```diff

function MyComponent() {

const error: string | Error = 'Error'

return (
  <div>
-   {error}
+   {error as string}
  </div>
)

}

```


Most common problems are related to rendering errors, where it could be
`string | Error` object rendered directly as a ReactNode. Most often it
is related to alerting framework:

```
export interface RuleFormParamsErrors {
  [key: string]: string | string[] | RuleFormParamsErrors;
}
```

Not sure if there is a better fix then casting, surely not short-term. 

### 2 More `useCallback` implicit any fixes

Follow up to #191659

### 3 `EuiSelect` doesn't have a placeholder prop 

In a couple of places, the `placeholder` prop was removed. This is
because react types were updated and `placeholder` was removed from the
base HTML element, so it highlighted places where `placeholder` prop was
redundant
Dosant added a commit that referenced this issue Sep 20, 2024
## Summary

Prep for #138222


This PR updates `styled-components` package to the latest v5 version. I
would like to do it for react@18 upgrade to suppress a noisy warning
that is coming from `styled-components` when it is used with react@18.
Here is that PR
https://github.com/styled-components/styled-components/pull/3564/files


Updates the failed snapshot tests.


Dear reviewers, could you please smoke-check your apps visually? This is
a minor upgrade, but I think it is worth to click around anyway.
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Sep 20, 2024
## Summary

Prep for elastic#138222

This PR updates `styled-components` package to the latest v5 version. I
would like to do it for react@18 upgrade to suppress a noisy warning
that is coming from `styled-components` when it is used with react@18.
Here is that PR
https://github.com/styled-components/styled-components/pull/3564/files

Updates the failed snapshot tests.

Dear reviewers, could you please smoke-check your apps visually? This is
a minor upgrade, but I think it is worth to click around anyway.

(cherry picked from commit b1434a4)
kibanamachine referenced this issue Sep 20, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [[react@18] bump &#x60;styled-components&#x60;
(#192368)](#192368)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-20T09:26:47Z","message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","apm:review"],"title":"[react@18]
bump
`styled-components`","number":192368,"url":"https://github.com/elastic/kibana/pull/192368","mergeCommit":{"message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192368","number":192368,"mergeCommit":{"message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1"}}]}]
BACKPORT-->

---------

Co-authored-by: Anton Dosov <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>
@petrklapka petrklapka added the old Used to help sort old issues on GH Projects which don't support the Created search term. label Sep 25, 2024
Dosant added a commit that referenced this issue Oct 1, 2024
## Summary

Part of #138222

This PR finilizes the breaking type fixes that are needed for upgrade to
React@18.
Most of the remaining issues are muted with "@ts-expect-error" are
tricky or could be runtime bugs that need to be looked at.

**Since the types changes are backward compatible (except the new APIs)
we can upgrade to @types/react@18 now so that we "save" the progress and
all the code in Kibana from now on is written in compatbile for react@18
way from types perspective.**
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 1, 2024
## Summary

Part of elastic#138222

This PR finilizes the breaking type fixes that are needed for upgrade to
React@18.
Most of the remaining issues are muted with "@ts-expect-error" are
tricky or could be runtime bugs that need to be looked at.

**Since the types changes are backward compatible (except the new APIs)
we can upgrade to @types/react@18 now so that we "save" the progress and
all the code in Kibana from now on is written in compatbile for react@18
way from types perspective.**

(cherry picked from commit bdd57b6)
@Dosant Dosant added the React@18 label Nov 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
old Used to help sort old issues on GH Projects which don't support the Created search term. React@18 Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc Team:Operations Team label for Operations Team Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Development

No branches or pull requests