0

I am trying to use WebView for the first time but I have this error:

'WebView' cannot be used as a JSX component.
  Its instance type 'WebView<{ originWhitelist: string[]; source: { html: string; }; }>' 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("C:/Users/louis/Downloads/UxTeams/UxTeamsProject/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

For me it seems strange that I have this part :

'import("C:/Users/louis/Downloads/UxTeams/UxTeamsProject/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.

As I have 2 node_modules/@types . There were others with similar errors : react-native-webview Typescript error: 'WebView' cannot be used as a JSX component and React Native: 'Component' cannot be used as a JSX component. Type '{}' is not assignable to type 'ReactNode' But not for the same reason I think.

Here are my dependencies in my package.json:

  "dependencies": {
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "expo": "~45.0.0",
    "expo-av": "~11.2.3",
    "expo-constants": "~13.1.1",
    "expo-linear-gradient": "~11.3.0",
    "expo-status-bar": "~1.3.0",
    "expo-web-browser": "~10.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-reanimated": "^2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-scroll-to-element": "^1.0.1",
    "react-native-web": "0.17.7",
    "react-native-webview": "^11.18.1",
    "react-scroll-to": "^3.0.0-beta.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "^0.67.8",
    "typescript": "~4.3.5"
  },
"resolutions": {
    "@types/react": "17.0.21"
  },
Louis
  • 321
  • 2
  • 13
  • 1
    Does this answer your question? [React Native: 'Component' cannot be used as a JSX component. Type '{}' is not assignable to type 'ReactNode'](https://stackoverflow.com/questions/71916289/react-native-component-cannot-be-used-as-a-jsx-component-type-is-not-as) – Ugur Eren Jun 13 '22 at 08:01
  • Sadly not, I just tried adding "resolutions": { "@types/react": "17.0.21" }, but it doesn't change anything – Louis Jun 13 '22 at 08:03
  • Have you run `yarn install` after adding the resolutions? Also, if you're using npm instead of yarn, you need to add @types/react@^17 as dependency, as suggested at the DefinitelyTyped issue https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765#issuecomment-1092938253 – Ugur Eren Jun 13 '22 at 08:07
  • 1
    Indeed, it worked with yarn install ! Thanks a lot. You can answer outside the comments so that I confirm a correct answer for this post? – Louis Jun 13 '22 at 08:10

0 Answers0