Typescript error JSX element type 'View' is not a constructor function for JSX elements

Question

The program itself runs fine, but Typescript is underlining a lot of items in red in my return function for my components. Specifically anything coming out of my react-native import.

Anything like View, Button, and the like are throwing these "errors". I say errors in quotes because the app runs without any problems at all. Typescript within my IDE (VS Code) is the only thing complaining. It throws these errors if I choose (through the bottom right status bar selector) JavaScript React or TypeScript React. Here is an example:

Here is the important bits of my package.json

"scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-screens": "~2.10.1",
    "react-native-web": "~0.13.12",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "@react-native-community/masked-view": "0.1.10"
  },
  "devDependencies": {
    "react-native-web": "~0.13.7",
    "@types/react": "*",
    "@types/react-dom": "*",
    "@types/react-native": "*",
    "typescript": "~3.9.5"
  },

And here is what a file looks like that is throwing these errors:

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";

const SummaryScreen = ({ navigation }) => {
    const accountDetailsPage = () => {
        navigation.navigate("Account Details");
    };

    const contactDetailsPage = () => {
        navigation.navigate("Contact Details");
    };

    return (
        <View style={styles.container}>
            <Text>HERE IS A BUNCH OF TEXT</Text>
            <Button title="Account Details" onPress={accountDetailsPage} />
            <Button title="Contact Details" onPress={contactDetailsPage} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
    },
});

export default SummaryScreen;

I think it's important to note I do NOT get these errors on components created from @react-navigation such as <Navigator> and <Stack.Screen ...

Here is my tsconfig as well:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true
    }
}

Somewhat related, something in VS Code is complaining it can't find the module for useState but that also works fine when running, with no errors

Silly question, but have you installed all dependencies (including dev dependencies), or just prod dependencies? — DylanSp
I also note that you have react-native-web in both dependencies and devDependencies; any reason for that? — DylanSp
Not able to replicate with just what you've posted, unfortunately. — DylanSp
I did install everything fresh, and I found the answer. VS Code was using a very old version of Typescript for some reason, and was not using the Typescript version I set in my tsconfig. A simple fix, but hard to diagnose and pin down. — Organiccat

Organiccat Organiccat · Accepted Answer · 2020-10-08T13:57:53

The problem was VS Code was using the wrong, and very old version of TypeScript. I'm not sure how it got set that way, or how it still had a version that was over a full release behind. Simple fix, but almost impossible to diagnose. Here's where I fixed it:

As you can see, I had version 2.7.2 installed on VS Code itself and that WAS selected. I now have 3.9.7 used and all those errors vanished.

Typescript error JSX element type 'View' is not a constructor function for JSX elements

1 Answers