'SideNavigation' cannot be used as a JSX component.

[chestonchow]

Hi there,

I have this following error just by importing it and it doesn't seem any other code on top of this is causing this error. Can I get some help for this?

Thanks,
Cheston

'SideNavigation' cannot be used as a JSX component.
  Its instance type 'Component<Pick<SideNavigationProps, "header" | "items" | "defaultExpandedAll"> & ({} | { wrappedComponentRef?: Ref<any> | undefined; }), any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/user/website/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.  TS2786

    75 |     }
    76 | 
  > 77 |     const navigation = <SideNavigation header={{ href: '/', text: 'asdfasdf'}}/>;
       |                         ^
    78 |     // const navigation = <SideNavigation header={{ href: '/', text: 'asdfasdf'}} items={navigationItems}/>;
    79 | 
    80 |     return (

Here are my package.json dependencies

  "dependencies": {
    "@aws-amplify/ui-react": "^2.15.1",
    "@mui/styles": "^5.4.1",
    "aws-amplify": "^4.3.19",
    "aws-northstar": "^1.3.12",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-feather": "^2.0.9",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.4",
    "which": "2.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@types/react-router-dom": "^5.3.3",
    "typescript": "^4.6.2"
  },

[jessieweiyi]

Thanks @chestonchow for reporting this issue. We will have a look today.

Does this issue happen after you update any dependencies?

[jessieweiyi]

Hi @chestonchow,

This issue is related to the new major version 18 of @types/react released 3 days ago. Some of the dependencies NorthStar is using are still relying on v17.

See:
@types/react@18 break @types/styled-components
@types/react@18 breaks "everything".

While we are continuing working on upgrading NorthStar to be compatible with new React 18,
please check whether you are using React version 17 and use one of the following temporary fixes to suppress the build error:

1. use @ts-ignore for the block; or
2. add resolution to your package.json if you are using yarn:

  "resolutions": {
    "@types/react": "^17",
    "@types/react-dom": "^17"
  },

We will update this thread if we find better solution for this issue.

[jessieweiyi]

Also:
Bug: React 18 types broken since the type release a view hours ago

[chestonchow]

Hi Jessie,

Thanks for following up! I didn't update to use React 18 yet as per my post earlier when the error came up, which is what confuses me. I might just put in @ts-ignore for now.

Thanks,
Cheston

[gaearon]

Would it make sense to change the dependencies on types to be optional peer deps? facebook/react#24304 (comment)