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

Question

There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator

The issue saids that the types dont match with JSX.element at the end of the messages is more specific: Type '{}' is not assignable to type 'ReactNode'

Whole message:

'Stack.Navigator' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element.
    Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/mrcmesen/Novum/ice-app/plant-maintenance/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.ts(2786)

The way to reprocede is just install these versions and run the project.

"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1",
"typescript": "^4.6.3"

My application still works and I don't have any error in console. I don't know why I have a red line under Stack.Navigator. But when I hover on it, it says that 'Stack.Navigator' cannot be used as a JSX component.

I also got the same error when using MaterialCommunityIcons

Update at 12-04-22 For React-Navigation

This is a issue related to the version of @types/react you need to add this minimum resolution to your project to solve it:

"dependencies": {
  "@types/react": "^17.0.41"
}

Reference: Github Credits: @lucasmds

Slight note: `@types/react 17.0.41` didn't work for me, but `18.0.8` fixed this for me. — Kevin Haube, Apr 30 '22 at 19:55

Yoel · Answer 1 · 2022-06-08T09:28:57.277

35

You will need to fix the version for @types/react package because many react libraries have dependency set as @types/react : "*", which will take the latest version of the package. (I suppose they just released version 18)

To do that you can add this in your package.json

if you use yarn

"resolutions": {
    "@types/react": "17.0.43"
  }

$ yarn

OR in npm

"devDependencies": {
  "@types/react": "^17.0.41"
}

OR

"devDependencie": {
  "@types/react": "18.0.8"
}

and run $ npm install

you can also use resolutions with npm-force-resolutions library

to do that you need to add to the script section in package.json file

"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

And then after doing npm install

see github issue

edited Jun 08 '22 at 09:28

answered Apr 10 '22 at 11:33

Yoel

7,555
6
27
59

1

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/243811/discussion-on-answer-by-yoel-stack-navigator-cannot-be-used-as-a-jsx-component). – Ryan M Apr 12 '22 at 07:09
Upgrading to the latest version worked for me. – Mauker May 19 '22 at 13:48
It resolves the Navigator component issue but conflicts with type script when npm start command is fired. – Eray Alparslan May 20 '22 at 19:19
the "resolution" answer fixed the problem. – Johhan Santana Jun 03 '22 at 14:41
Yes, but with npm “resolution” doesn't work – Yoel Jun 03 '22 at 15:35

score 19 · Answer 2 · answered Jun 02 '22 at 19:35

19

It's a simple typing error that can be resolved by updating the React typing.

npm install -D @types/react

or

yarn add -D @types/react

answered Jun 02 '22 at 19:35

Dhonata Freitas

191
3

score 5 · Answer 3 · answered May 29 '22 at 16:53

5

I fix it by updating @types/react up to its 18 version.

actually I'm using "@types/react": "^18.0.9".

To update just do:

npm install -D @types/react

answered May 29 '22 at 16:53

Rafo

511
3
17

willy fernandez · Answer 4 · 2022-06-10T16:20:54.230

3

Run yarn why @types/react for Yarn and npm ls @types/react to check if there are multiple versions installed and why they are being installed
add "resolutions": { "@types/react": "~17.0.21"} or another version compatible with react-native in package.json
run 'yarn install' or npm i

edited Jun 10 '22 at 16:20

answered Jun 10 '22 at 16:19

willy fernandez

31
3

Anarkrypto · Answer 5 · 2022-07-17T05:08:14.017

2

I had this problem at the expo and nothing resolved it, even with resolutions. Because the expo always warned It looks like you're trying to use TypeScript but don't have the required dependencies installed. Would you like to install @types/react

Then I found this solution, using version 18.0.0 inside resolutions. Add this to package.json:

"resolutions": {
    "@types/react": "18.0.0"
  }

edited Jul 17 '22 at 05:08

answered Jul 06 '22 at 07:57

Anarkrypto

81
1
4

1

Add this to `package.json` resolved the error for me – Utsav Barnwal Jul 15 '22 at 05:38

score 0 · Answer 6 · answered Aug 11 '22 at 20:56

I'm using "expo": "~45.0.0". After installing react native elements the error comes up. As @yoel said

You will need to fix the version for @types/react package because many react libraries have dependency set as @types/react: ""*, which will take the latest version of the package

The problem is @types/x: "*" which in my case is @types/react-native: "*". So I added this resolutions. I took the versions by looking at my devDependencies.

like this and everything works fine:

  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@react-native-community/eslint-config": "^3.1.0",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.6",
    "cross-env": "^7.0.3",
    "eslint": "7.32.0",
    "husky": "^8.0.1",
    "prettier": "^2.7.1",
    "typescript": "~4.3.5"
  },
  "resolutions": {
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.6"
  }

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

Update at 12-04-22 For React-Navigation

6 Answers6

Linked