Element: Ensure that the package uses the up to date React types#37365
Element: Ensure that the package uses the up to date React types#37365
Conversation
5b6a803 to
8ec95e0
Compare
|
I see the following error coming from TypeScript validation: Error: packages/components/src/text/hook.js(87,13): error TS2769: No overload matches this call.
Overload 1 of 2, '(template: TemplateStringsArray, ...args: CSSInterpolation[]): SerializedStyles', gave the following error.
Argument of type '{ color: Property.Color | undefined; display: Property.Display | undefined; fontSize: string; fontWeight: import('react').CSSProperties['fontWeight']; lineHeight: string | number | undefined; letterSpacing: Property.LetterSpacing<...> | undefined; textAlign: Property.TextAlign | undefined; }' is not assignable to parameter of type 'TemplateStringsArray'.
Object literal may only specify known properties, and 'color' does not exist in type 'TemplateStringsArray'.
Overload 2 of 2, '(...args: CSSInterpolation[]): SerializedStyles', gave the following error.
Argument of type '{ color: Property.Color | undefined; display: Property.Display | undefined; fontSize: string; fontWeight: import('react').CSSProperties['fontWeight']; lineHeight: string | number | undefined; letterSpacing: Property.LetterSpacing<...> | undefined; textAlign: Property.TextAlign | undefined; }' is not assignable to parameter of type 'CSSInterpolation'.
Types of property 'fontWeight' are incompatible.
Type 'FontWeight | undefined' is not assignable to type 'FontWeight | (FontWeight | undefined)[] | ("bold" | "normal" | Globals | "bolder" | "lighter")[] | undefined'.
Type 'string & {}' is not assignable to type 'FontWeight | (FontWeight | undefined)[] | ("bold" | "normal" | Globals | "bolder" | "lighter")[] | undefined'.
Type 'string & {}' is not assignable to type '"lighter"'. |
|
It almost looks like Also cc'ing @sarayourfriend in case she experienced this same issue before |
I gave it a quick try by updating Emotion to the latest version in diff --git a/packages/components/package.json b/packages/components/package.json
index 9d754f2c21..32c5430ada 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -30,10 +30,10 @@
],
"dependencies": {
"@babel/runtime": "^7.16.0",
- "@emotion/cache": "^11.4.0",
- "@emotion/css": "^11.1.3",
- "@emotion/react": "^11.4.1",
- "@emotion/styled": "^11.3.0",
+ "@emotion/cache": "^11.7.1",
+ "@emotion/css": "^11.7.1",
+ "@emotion/react": "^11.7.1",
+ "@emotion/styled": "^11.6.0",
"@emotion/utils": "1.0.0",
"@wordpress/a11y": "file:../a11y",
"@wordpress/compose": "file:../compose",I then reinstalled dependencies (via |
|
@ciampo That sounds familiar to me. I believe during the Emotion 11 upgrade I ran into similar issues with the React types drifting. |
|
I also included changes to |
63164c3 to
47feff4
Compare
|
Thank you @ciampo and @sarayourfriend for your help. It looks like it resolves the issue 🎉 |
|
Size Change: -226 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
47feff4 to
bbb957c
Compare
Description
Related to #37264, #37324 and #36041.
I detected this issue while trying to upgrade the package lock file to the format used by npm 8.
Testing
Ensure
npm iandnpm run buildworks correctly.Types of changes
Bug fix (non-breaking change which fixes an issue).
Checklist:
*.native.jsfiles for terms that need renaming or removal).