Type errors because of types/react~17.

[j3sch]

Summary

I have created a new project with the typescript template, and I get type errors with the react navigation component.

Stack.Navigator' cannot be used as a JSX component.

Because the current version of react navigation requires types/react~18.

Managed or bare workflow? If you have made manual changes inside of the ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android, iOS

Package versions

No response

Environment

System:
OS: macOS 12.3.1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Watchman: 2022.03.21.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
IDEs:
Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
npmPackages:
expo: ~44.0.0 => 44.0.6
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
expo-cli: 5.3.1
Expo Workflow: managed

Reproducible demo

https://github.com/expo/expo/tree/main/templates/expo-template-tabs

Stacktrace (if a crash is involved)

No response

[Simek]

Hello @j3sch, I'm not able to reproduce the problem using fresh project generated from expo init and tabs template.

Can you create the minimal reproduction project and share the code?

[j3sch]

@Simek thank you for your fast response. I have created a new project with the template expo-template-tabs and again got the error in navigation/index.tsx. However, when I opened the project in webstorm, I noticed that these errors were not displayed. I only saw the errors in vscode.

And if I update types/react to 18, the errors are gone. But then expo blocks me to start the project.

[Simek]

It looks like this problem is related to this one, which surfaced in navigation repo a few days ago:

• 'Drawer.Navigator' cannot be used as a JSX component with TypeScript react-navigation/react-navigation#10507

For me, it seems like the editor-specific issue or the way in which dependencies are resolved in some particular cases, because app builds and works correctly. The fact that other editors or IDEs do not report any errors/warnings might support the first assumption.

Unfortunately React types cannot be upgraded to 18 is SDK 44 projects due to React Native version which is underneath.

EDIT:

After a bit more research it looks like the latest release of @types/react is flawed in some way, which result in many React Native component being marked as incorrect. When setting up new project (without the lock), the latest version is fetched without the direct bump in the package.json. So the suggested temporary workaround to add resolution mentioned in the linked above issue should resolve the problem.

The problem has also been reported in the DefinitelyTyped repository, so hopefully this will be fixed soon.

[j3sch]

Thanks for looking into this issue and for your help.

[ScreamZ]

This is hell, but this helped:

"resolutions": { "@types/react": "~17.0.21" },

[whoisdominic]

Changing to these dependencies worked for me

"@types/react": "^17.0.2", "typescript": "^4.6.3", "react": "17.0.2",

[SrBrahma]

"resolutions": { "@types/react": "~17.0.21" },

For those who don't know (like me before finding out!), add this line on the package.json, on the first level.

[Simek]

Refs: DefinitelyTyped/DefinitelyTyped#59862

[owencm]

FYI: for whatever reason the resolutions workaround didn't work for me, but I was at least able to suppress the error with {/* @ts-ignore */ } on the line above my use of the component in question.

[pablos91]

"resolutions": { "@types/react": "~17.0.21" },

For those who don't know (like me before finding out!), add this line on the package.json, on the first level.

This is what helped in our project! Remember to do yarn afterwards and Reload Window in VS Code. You might also want to rm -rf node_modules as well as purging yarn cache with yarn cache clean

[brentvatne]

i believe this was fixed in a recent @types/react-native release: DefinitelyTyped/DefinitelyTyped#61081

so, i'm closing this. if you find it is not fixed for you please create a new issue with a minimal reproducible example, thanks!