JSX element errors when upgrading to @types/react 18.2.22

[gruyaume]

Overview

After upgrading from @types/react 18.2.21 to 18.2.22, we are getting build errors of the type is not a valid JSX element type for Canonical's React components. For example:

> next build

⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
Failed to compile.

./app/network-configuration/page.tsx:[10](https://github.com/canonical/sdcore-nms/actions/runs/6427008205/job/17452026346?pr=94#step:5:11)6:10
Type error: 'ConfirmationModal' cannot be used as a JSX component.
  Its type '({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, ...props }: Props) => ReactElement<any, string | JSXElementConstructor<any>>' is not a valid JSX element type.

You can look at this PR from renovate that tries to upgrade the package version and the corresponding CI build error:

• https://github.com/canonical/sdcore-nms/pull/94

[gruyaume]

It seems like this upgrade broke a few libraries:

• https://github.com/DefinitelyTyped/DefinitelyTyped/issues/66841

[bartaz]

Let's see if merging #967 will help with that

[gruyaume]

We'll also need a new npm release to leverage the changes

[bartaz]

I know, GH actions have been quite slow to build, so it slowed down merging the dependency PRs.

[bartaz]

@gruyaume Version 0.47.1 is released with updated dependencies, including "@types/react": "18.2.28".

We used to have issues with incompatible versions of types/react coming from different dependencies, so we ended up enforcing resolution of a single version via resolutions in package.json.

https://github.com/canonical/react-components/blob/491500627d333ff9d07e8847b25f6ecfe0d91810/package.json#L99-L100

If you are using types/react in your project directly, maybe you need to do something similar, to make sure all dependencies use the exact same version of types.