chore: Add support new types from React 18 #113
Conversation
https://github.com/vtex-sites/nextjs.store/runs/6822250131 ``` info - Checking validity of types... Failed to compile. ./src/components/sections/Hero/Hero.stories.tsx:19:4 Type error: No overload matches this call. Overload 1 of 2, '(props: ProviderProps | Readonly): HelmetProvider', gave the following error. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: ProviderProps, context: any): HelmetProvider', gave the following error. Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. ``` This provider was being used in a storie just because Gatsby's version needs it and we were keeping the files in sync. But for some reason, after upgrading type definitions for React 18, this became a problem. I think it's safe to remove it since this is not needed for the NextJS version (the `Hero` storie still working proves that).
https://github.com/vtex-sites/nextjs.store/runs/6822439208 ``` info - Checking validity of types... Failed to compile. ./src/sdk/error/ErrorBoundary/ErrorBoundary.tsx:63:23 Type error: Property 'children' does not exist on type 'Readonly<{}>'. ```
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Preview is readyThis pull request generated a Preview👀 Preview: https://sfj-943421a--nextjs.preview.vtex.app |
Lighthouse ReportsHere are the Lighthouse reports of this Pull Request📝 Based on commit 943421a
|
| @@ -93,7 +93,7 @@ | |||
| "webpack": "^5.72.0" | |||
| }, | |||
| "resolutions": { | |||
| "@types/react": "^17.x" | |||
| "@types/react": "^18.x" | |||
There was a problem hiding this comment.
Why do we need the resolutions? Are we using more than one version of React?
There was a problem hiding this comment.
I think that's because the dependencies tree depends on different versions of @types/react and we can indicate the correct version using this resolutions option.
There was a problem hiding this comment.
This resolutions field is also new to me, it seems to be yarn-specific (not npm). I found some documentation here: [yarn] Selective dependency resolutions.
Curiously we don't have it for Gatsby. Also there I was able to have TS understand the new React 18 hooks by just adding this configuration to tsconfig.json, but that didn't work here in NextJS.
😞
Conflicts: - CHANGELOG.md
How does it work?
I had tried using a new feature from React 18 called
useDeferredValuebut got a type errorModule '"react"' has no exported member 'useDeferredValue'.. I started by updating the type definitions from 17.x to 18.x but got another type error withHelmetProvider. I was able to remove it as it was not really needed, but the build failed again in the next type error inErrorBoundary. Finally, after adjusting the missing type, I got everything working and with support for React 18 types.How to test it?
Try to use any new React 18 features and their types should not fail to compile the build.