Upgrade @types/react package and @types/react-dom

[mrmurphy]

What?

Upgrades the @types/react and @types/react-dom packages

Why?

We have a project depending on @wordpress/components that upgraded @types/react to the latest version. When that happened we ran into the build error mentioned here:

DefinitelyTyped/DefinitelyTyped#69006

How?

I've just updated the versions in the dependencies and addressed the two compiler errors that the upgrade produced.

1. Remove "placeholder" from border-control component. As far as I could tell, that attribute wasn't available on the underlying type and wasn't documented or useful to the BorderControl component.
2. Cast View to a specific type. This one I'm less sure about. The compiler wasn't happy when trying to assign the result of styled.div`` to the specified type. Here was the error:

Type 'StyledComponent<{ theme?: Theme | undefined; as?: ElementType<any, keyof IntrinsicElements> | undefined; }, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>' is not assignable to type 'WordPressComponent<"div", ViewProps & RefAttributes<any>, true>'.
  Type 'ReactNode' is not assignable to type 'Element | null'.
    Type 'undefined' is not assignable to type 'Element | null'.ts(2322)

I addressed this by casting the result of styled.div to the specific desired type. I'm not sure how safe this is, but I think TS would warn me if that cast weren't compatible, like it does if I try to cast a string literal to a number.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @mrmurphy.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: mrmurphy.

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @mrmurphy! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[mirka]

I've look into this, and both of the problems that are addressed here (BorderControl and View) are surfacing typing errors that should be fixed in a more complete way. And it looks like those are each important enough to warrant their own PRs and reviews.

Could you hold off a bit on this so I can fix the type errors separately first? I think I can do it next week.

Also, heads up that a TS update was merged recently (#60793), though it may not be specifically relevant to this problem.

[mrmurphy]

Great, thank you @mirka! Do you want to close this PR and open a new one? Or just keep it open until next week?

[mirka]

Do you want to close this PR and open a new one?

Let's keep this one. I only wanted to separate out the type fixes.

I proposed a fix for View in #60919. The BorderControl problem was simpler than I thought and doesn't warrant a separate PR, so let's just add the fix in this PR:

diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index b1ff87aaf5..5e028050d8 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -61,6 +61,10 @@ export type BorderControlProps = ColorProps &
 		 * interaction that selects or clears, border color, style, or width.
 		 */
 		onChange: ( value?: Border ) => void;
+		/**
+		 * Placeholder text for the number input.
+		 */
+		placeholder?: HTMLInputElement[ 'placeholder' ];
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */

We should be good to go once the View fix is merged.

[mirka]

@mrmurphy The fix for View is merged now 👍

[sirreal]

Is anything blocking this? @mirka are you planning to land it or do you need help? I think (hope) this will fix some intermittent type issues with react and ariakit like this:

node_modules/@ariakit/react-core/cjs/tooltip/tooltip-provider.d.ts:14:100 - error TS2694: Namespace '"…/node_modules/@types/react/jsx-runtime"' has no exported member 'JSX'.

14 export declare function TooltipProvider(props?: TooltipProviderProps): import("react/jsx-runtime").JSX.Element;

[youknowriad]

Since this is becoming a blocker for me in another PR. I went ahead and applied the review suggestion. This should be ready to go.

[sirreal]

There are newer versions of these types now:

"@types/react": "18.3.1"
"@types/react-dom": "18.3.0"

It would be nice to get on the latest version.

I've tried updating that, but I'm having problems building locally.

I did notice that we have multiple versions of react types which is not ideal. There's a single version of react used and there should be a single set of types. react-native-safe-area seems to depend on v16 react types. That can (and should!) be solved with overrides, but there still seemed to be other incompatibilities between types when I tried to build locally.

[mirka]

No blockers on my end, please feel free to commandeer and merge since I will be unavailable for the next few days.

[youknowriad]

I'm going to need some help here :) I'm having trouble reproducing the failures reported in CI locally.

[youknowriad]

Oh I think the remaining issue is just because the compressed size check switches branches and because of the different versions of the package between the branches, it results in errors but the errors are not really there if you actually clean everything properly.

Based on that, I'm going to force merge this one. There's probably something to be done to "fix" that job but since it's an external action, it's hard to change. Maybe we can do something in our cleanup function (types linger)

[github-actions]

Congratulations on your first merged pull request, @mrmurphy! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[sirreal]

I'm worried this will still cause problems, try checking out trunk and running:

npm ci
./node_modules/.bin/tsc --build --force

@youknowriad are you able to reproduce build issues like that? I'll try to help fix this.

[youknowriad]

I have no build issues in trunk (using the instructions above) and the CI jobs in trunk are passing.

[oandregal]

Trunk no longer works for me doing npm install && npm run dev:

[youknowriad]

@oandregal can you try after cleaning everything?

rm -rf build
rm -rf packages/*/build*
npm run clean:package-types

[oandregal]

can you try after cleaning everything?

It works after doing that. 👍

[mrmurphy]

Ahh thank you so much to all of you for wrapping this up. I moved on to other projects and hadn't circled back around. I really appreciate it!