react-native-webview Typescript error: 'WebView' cannot be used as a JSX component

Question

I am trying to set up a simple React Native app using Expo with TypeScript that shows a WebView. My App.tsx file contains the following:

import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    return (
        <WebView
            style={styles.container}
            source={{ uri: 'https://example.com/' }}
        />
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: Constants.statusBarHeight,
    },
});

This code works correctly, but the TypeScript compiler throws an error at the WebView component.

App.tsx:7:4 - error TS2786: 'WebView' cannot be used as a JSX component.
  Its instance type 'WebView<{ style: { marginTop: number; }; source: { uri: string; }; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("C:/example/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

7   <WebView
     ~~~~~~~


Found 1 error.

I am using the following versions of my dependencies:

{
    "dependencies": {
        "expo": "~44.0.0",
        "expo-status-bar": "~1.2.0",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.3",
        "react-native-web": "0.17.1",
        "react-native-webview": "11.15.0"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@types/react": "~17.0.21",
        "@types/react-native": "~0.64.12",
        "typescript": "~4.3.5"
    }
}

How can I correct this error?

You can try to make your App class component, just to see if the error still occurs — Marat, Apr 08 '22 at 19:59
@Marat That does appear to fix the TypeScript error, is there a way to write the component as a function instead of a class without the error? — Julian Lachniet, Apr 08 '22 at 20:01
Odd this used to work for me. Something seems to have changed over the last few months since I haven't touched my webview code. — Archimedes Trajano, Apr 25 '22 at 14:09
I have a sneaking suspiction you may be using Storybook, which includes a dependency on @reach/router which creates a dependency on @types/reach__router which requires @types/react@18 causing you to have more than one @types/react@18 on your path. — Archimedes Trajano, Apr 25 '22 at 15:34

score 8 · Answer 1 · answered Apr 25 '22 at 15:42

You would get this error if you had more than one @types/react library in your node_modules. In my case this was caused by Storybook which included @reach/router which included @types/reach__router which included @types/react@18 different from my current Expo version.

Using How do I override nested dependencies with `yarn`?

I added the matching version

  "resolutions": {
    "@types/react": "~17.0.21"
  },

and regenerated to get rid of the error.

score 0 · Answer 2 · answered Apr 08 '22 at 19:56

0

Some libraries don't support typescript. In this case you can use the comment // @ts-ignore in front of the error to let TS ignore it.

answered Apr 08 '22 at 19:56

Maximilian Dietel

998
8
20

score 0 · Answer 3 · answered Apr 08 '22 at 20:13

0

You can try like that:

const App: FC = () => {
 return (
     <WebView
         style={styles.container}
         source={{ uri: 'https://example.com/' }}
     />
 );
}

export default App;

answered Apr 08 '22 at 20:13

Marat

1,288
2
11
22

react-native-webview Typescript error: 'WebView' cannot be used as a JSX component

3 Answers3

Linked