Search code examples
javascripttypescriptreact-nativereact-navigationreact-navigation-v5

@react-navigation/native upgrade to V5 SyntaxError

I am having some trouble with upgrading my react-navigation from v3 to v5. I keep running into this error, at first I thought it was a bug but I am not finding any other complaints online about it. To be 100% sure the old versions weren't causing any issues, I completely uninstalled all react-navigation and started from scratch with v5. I am still getting an error with the index file. It doesn't appear to understand the typescript...is this a known bug? Is there another step I need to take that is not in the documentation about installing Typescript?

UPDATE: ./types files is not compiling correctly...it doesn't seem to recognize NavigationState or ActionHelpers...is this a bug? Has anyone seen this before?

UPDATE 2 i am running on RN V0.59 so I am thinking there could be a dependency issue. I am upgrading to V0.62.2 and seeing if the issue persists

enter image description here

https://reactnavigation.org/docs/getting-started

enter image description here

SyntaxError: /Users/myusername/myprojectname/node_modules/@react-navigation/stack/src/index.tsx: Unexpected token (51:12)

49 | * Types 50 | */

51 | export type { | ^ 52 | StackNavigationOptions, 53 | StackNavigationProp, 54 | StackHeaderProps,

Solution

  • If you use TypeScript, do this:

    • Delete node_modules and the lock file (yarn.lock or package.lock)
    • Upgrade TypeScript to latest i.e. 3.8.3.
    • Run yarn cache clean or npm cache clean.
    • Run yarn or npm install.
    • Run yarn react-native start --reset-cache.
    • Run yarn react-native run-android.

    If you don't, then follow these steps:

    • Run yarn add --dev @babel/core@^7.9.0 @babel/runtime@^7.9.0.
    • Uninstall apk from emulator/phone.
    • Run yarn react-native start --reset-cache.
    • Run yarn react-native run-android.

    If that did not work, go to android/, and run gradlew clean or ./gradlew clean, remove the apk from you phone and rerun yarn react-native run-android.