The JSX component cannot be named 'Stack.Navigator' or used as such

Encountering a type issue with react navigation using Stack.Navigation or Stack.Group from createNativeStackNavigator

The error message indicates that the types do not match with JSX.element. Specifically, it states: 

Type '{}' is not assignable to type 'ReactNode'

Complete error 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)

To reproduce, simply 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 functions without any errors in the console. However, there's a red line under Stack.Navigator which displays an error saying it can't be used as a JSX component when hovered over.

https://i.stack.imgur.com/jFuOs.png

Encountered the same error while using MaterialCommunityIcons

Update on 12-04-22 For React-Navigation

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

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

Reference: Github Credits: @lucasmds

typescriptreact-nativeexporeact-navigationreact-navigation-v6

Answer №1

In order to resolve package dependency issues with @types/react, you may need to specify a specific version in your package.json. Many react libraries have a wildcard dependency set for @types/react : "*", which pulls the latest version available (likely version 18).

To address this, you can add the following to your package.json:

If you are using yarn:

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

$ yarn

Alternatively, for npm:

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

OR

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

Followed by running $ npm install

You can also utilize the resolutions feature along with the npm-force-resolutions library. To do so, include the following in the script section of your package.json file:

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

After executing npm install,

Refer to the associated github issue

Answer №2

To fix this issue, all you need to do is update the typing for React.

npm install -D @types/react

or

yarn add -D @types/react

Answer №3

The issue was resolved by upgrading @types/react to version 18.

Currently, I have " @types/react": "^18.0.9" installed

To perform the update, simply execute:

npm install -D @types/react

Answer №4

  1. Execute yarn what @types/react for Yarn and npm list @types/react to verify whether there are multiple versions installed and the reason behind their installation
  2. include "resolutions": { "@types/react": "~17.0.21"} or a different version that is compatible with react-native in package.json
  3. execute 'yarn install' or npm i

Answer №5

When I encountered this issue at the trade show, none of the suggested solutions seemed to work. The expo kept giving me a warning message saying 

It looks like you're trying to use TypeScript but don't have the required dependencies installed. Would you like to install @types/react

Eventually, I stumbled upon a fix by specifying version 18.0.0 inside resolutions. Just add the following to your package.json:

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

Answer №6

Currently, my project is utilizing 

"expo": "~45.0.0"
. However, upon the installation of react native elements, an error surfaced. In a helpful response by @yoel, it was noted that:

The issue lies in the version declaration for the @types/react package, as many react libraries have dependencies set to @types/react: "*", which defaults to the latest version of the package.

In my case, the culprit was @types/x: "*", specifically @types/react-native: "*". To rectify this, I included the following resolutions based on the versions found within my devDependencies:

An example configuration that resolved the issue and allowed everything to function correctly includes:

  "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"
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do Angular and NestJS manage to dynamically resolve injection tokens during runtime using the TypeScript type hints provided at compile time?

Frameworks such as Angular and NestJS in TypeScript utilize dependency injection by converting TypeScript type hints into injection tokens. These tokens are then used to fetch dependencies and inject them into constructors at runtime: @Injectable() // < ...

angulartypescriptdependency-injectionnestjs

Methods for setting a global instance within a local function

Hello, I'm fairly new to using TypeScript and Angular2. Let me quickly explain what I'm trying to accomplish with my method. I have some hard-coded XML data that I need to parse into JSON format. Once parsed, each JSON object needs to be assigned ...

typescript

Modify a property of an object using the useState Hook, where the property name is dynamically retrieved from a variable

const [fee, setFee] = useState({newPatient:'',establishedPatient:''}) const field1='newPatient' const field2='establishedPatient' To modify the fee object properties, I am looking to dynamically assign ...

javascriptreactjsreact-nativeobject

The error in Angular 6 is that the property 'controls' is not available on the type 'AbstractControl'

What happens when we use setvalue in a for loop? Everything seems to be running smoothly, but unfortunately an error is thrown: The property 'controls' is not recognized on the type 'AbstractControl'. In Angular 6, how can we resol ...

angulartypescriptangular6

Developing a seamless social authentication process using react-native in tandem with a backend API

I'm currently working on developing a mobile app using React Native along with a NodeJS/MongoDB API Backend. One of the key features I want to integrate is social authentication through Google/Facebook, but it's crucial for this process to occur ...

node.jsreact-nativeauthenticationgoogle-authenticationfacebook-authentication

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

Creating TypeScript atom packages

Has anyone successfully implemented this before? I couldn't locate any assistance for it. If someone could provide references to documentation or existing code, that would be great. I know that Atom runs on Node and that there is a TypeScript compil ...

typescriptpackageatom-editor

Error: Incorrect data type found in React Route component

I've encountered an issue while attempting to utilize the Route component in my application. The error message I'm receiving reads as follows: [ts] Type '{ path: "/:shortname"; component: typeof FirstComponent; }' is not assignable ...

reactjstypescriptreact-router

Tips for inserting a component into a div selector using Angular 2

Could someone please help me figure out how to inject a component into a div selector using a class or id? I'm familiar with injecting components into other components, but not sure how to do it specifically within a div. Any guidance would be greatly ...

javascriptangulartypescriptweb-frontend

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

javascripthtmlangularformstypescript

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...

html.netangulartypescript

Leverage context to facilitate communication between components operating at various levels of the system

I am currently working on the settings pages of my applications. Each page features a common SettingsLayout (parent component) that is displayed across all settings pages. One unique aspect of this layout is the presence of an ActionsBar, where the submit/ ...

reactjstypescriptreact-hooksnext.jsreact-context

Implementing global user authentication state with Zustand in Next.js version 13.4.9

I'm grappling with incorporating zustand into my Next.js 13.4.9 app, specifically for managing global authentication state. Below is the code snippet I have in my application: zustand store: // /src/store/AuthStore.ts import { create } from 'zu ...

reactjstypescriptnext.jszustand

Is it possible to establish a specific many-to-many relationship using Prisma?

In the Prisma documentation, it states that the set function can be used to override the value of a relation. const user = await prisma.user.update({ where: { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73121f ...

typescriptormprismaprisma2

Establish a connection between a variable and the selected value of Mat-select using a form

Within my TypeScript code, there exists a variable named type whose value is provided by its parent component. This type value is essentially a string that has the possibility of being empty upon being received from the parent component. Additionally, in t ...

angulartypescript

Parent observable method encountering an error while grouping multiple HTTP calls in Angular

I am facing an issue with managing multiple http calls and handling errors that may occur during their execution. I want to be able to identify which calls have failed so that I can retry them using a different method. However, without visibility at the co ...

angulartypescriptrxjsobservablefork-join

Loop through every item in Typescript

I am currently working with the following data structure: product: { id: "id1", title: "ProductName 1", additionalDetails: { o1: { id: "pp1", label: "Text", content: [{ id: "ppp1", label: "Tetetet" ...

javascriptarraystypescriptobjectforeach

There is no initial value set for the property and it is not definitively assigned in the constructor

I encountered an issue while working on the following code snippet: export class UserComponent implements OnInit { user: User; constructor() { } ngOnInit() { this.user = { firstName : "test", lastName ...

angulartypescript

Error TS2307: Module 'calculator' could not be located

Running a Sharepoint Framework project in Visual Studio Code: This is the project structure: https://i.stack.imgur.com/GAlsX.png The files are organized as follows: ComplexCalculator.ts export class ComplexCalculator { public sqr(v1: number): number ...

javascriptjsontypescriptgulpvisual-studio-code

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?

Index.tsx import Image from 'next/image' import Head from "next/head" import { sanityClient, urlFor } from "../sanity" import Link from 'next/link' import {Collection, address} from '../typings'; import ...

typescriptnext.js