react-native icon indicating copy to clipboard operation
react-native copied to clipboard
verified publisher icon facebook

ERROR TypeError: undefined is not a function, js engine: hermes -- WebView React Natve

Open atifgk opened this issue 2 years ago • 9 comments

Description

<WebView
        source={{ uri: newUrl }}
        onLoadEnd={() => {
          setLoading(false);
        }}
      />

error

React Native Version

0.71.7

Output of npx react-native info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 17.72 GB / 31.40 GB
  Binaries:
    Node: 19.8.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 17.5.33516.290 (Visual Studio Community 2022)
  Languages:
    Java: 11.0.16.1 - C:\Program Files\Microsoft\jdk-11.0.16.101-hotspot\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.7 => 0.71.7
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

npx expo start --dev-client

Snack, code example, screenshot, or link to a repository

error

atifgk avatar Apr 27 '23 03:04 atifgk

Bro did you find a solution for this problem I am also facing it

aum1618 avatar May 17 '23 06:05 aum1618

@aum1618 yes with latest version its working now

atifgk avatar May 17 '23 13:05 atifgk

@atifgk last version of what? I'm using "react-native": "0.71.8" and still same issue, any idea?

sebas-deedee avatar May 23 '23 19:05 sebas-deedee

@sebas-deedee can you share package.json file?

atifgk avatar May 26 '23 12:05 atifgk

@atifgk sure thing, here it is:

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start -c",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write App.js app.json appSettings.js babel.config.js src/**/*.js"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@juliuslouwllc/eaglebus-web-core": "^1.6.1",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.9.0",
    "axios": "^0.21.1",
    "card-validator": "^8.0.0",
    "color": "^3.1.2",
    "expo": "^48.0.0",
    "expo-constants": "~14.2.1",
    "expo-dev-client": "~2.2.1",
    "expo-font": "~11.1.1",
    "expo-linking": "~4.0.1",
    "expo-localization": "~14.1.1",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-web-browser": "~12.1.1",
    "i18n-js": "^3.7.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "native-base": "^2.13.13",
    "prop-types": "^15.7.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^6.15.1",
    "react-native": "0.71.8",
    "react-native-calendars": "^1.309.0",
    "react-native-flash-message": "^0.1.23",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.11",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-preset-expo": "^9.3.0",
    "eslint": "7.2.0",
    "eslint-config-airbnb": "18.2.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-babel-module": "^5.1.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "4.0.0",
    "husky": "4",
    "lint-staged": "10",
    "prettier": "^2.2.1"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,json,md}": "prettier --write"
  }
}

sebas-deedee avatar May 26 '23 13:05 sebas-deedee

:warning: Missing Reproducible Example
:information_source: It looks like your issue is missing a reproducible example. Please provide either:

github-actions[bot] avatar May 26 '23 14:05 github-actions[bot]

@sebas-deedee try this code for Webview. Hopefully it will work :-)

            <WebView scalesPageToFit
              startInLoadingState
              ref={(ref) => webViewRef.current = ref}
              source={{ uri: newUrl }}
              originWhitelist={['*']}
              style={{ flex: 1 }}
              onLoadStart={() => {

              }}
              onLoad={(webview) => {
                
              }}
              onNavigationStateChange={(webview) => {

              }}
              javaScriptEnabled={true}
              domStorageEnabled={true}
              setSupportMultipleWindows={false}
              onScroll={(e) => { handleScroll(e) }}
              onMessage={() => { }}
              onError={syntheticEvent => {
                const { nativeEvent } = syntheticEvent;
              }}
              renderError={error => {
                return (<View>
                  <Text>Something went wrong. Please try again later</Text>
                </View>);
              }}
            />

atifgk avatar Jun 01 '23 18:06 atifgk

I'm having the same problem can u help me:

`import React from 'react'; import { View, StyleSheet, SafeAreaView, ActivityIndicator } from 'react-native'; import { WebView } from 'react-native-webview';

const ActivityIndicatorElement = () => { //making a view to show while loading the webpage return ( <ActivityIndicator color="#009688" size="large" style={styles.activityIndicatorStyle} /> ); }

const Fisio = () => { return ( <SafeAreaView style={{ flex: 1 }}> <View style={styles.container}> <WebView sharedCookiesEnabled={true} source={{ uri: "https://staging.ordemdosfisioterapeutas.pt/encontre-um-fisioterapeuta?hideinapp=true" }} renderLoading={ActivityIndicatorElement} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} /> </View> </SafeAreaView> ); };

const styles = StyleSheet.create({ container: { flex: 1, }, activityIndicatorStyle: { flex: 1, position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', }, });

export default Fisio; `

OtanielJr avatar Jun 13 '23 12:06 OtanielJr

@ALIG4TOR have you tried above that i have shared? https://github.com/facebook/react-native/issues/37116#issuecomment-1572591930

atifgk avatar Jun 14 '23 15:06 atifgk

I have solved it by commenting out "//RNCWebViewModule.shouldStartLoadWithLockIdentifier(shouldStart, lockIdentifier);", present in WebView.android.js (Line 42).

utpalendubarman avatar Jun 16 '23 18:06 utpalendubarman

I have solved it by commenting out "//RNCWebViewModule.shouldStartLoadWithLockIdentifier(shouldStart, lockIdentifier);", present in WebView.android.js (Line 42).

This is working. Can you please explain what was wrong?

chessibrahim avatar Jul 11 '23 19:07 chessibrahim

This is what worked for me. If you are using expo, install it with npx expo install react-native-webview

weixinwu avatar Jul 13 '23 00:07 weixinwu

Description

<WebView
        source={{ uri: newUrl }}
        onLoadEnd={() => {
          setLoading(false);
        }}
      />

error

React Native Version

0.71.7

Output of npx react-native info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 17.72 GB / 31.40 GB
  Binaries:
    Node: 19.8.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 17.5.33516.290 (Visual Studio Community 2022)
  Languages:
    Java: 11.0.16.1 - C:\Program Files\Microsoft\jdk-11.0.16.101-hotspot\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.7 => 0.71.7
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

npx expo start --dev-client

Snack, code example, screenshot, or link to a repository

error

This error casually is just misunderstood of what is URL and URI, if u use "www.google.com" on a URI that's an error, the correct way is "https://www.google.com" because she's a complete URI

OtanielJr avatar Jul 13 '23 01:07 OtanielJr

This error casually is just misunderstood of what is URL and URI, if u use "www.google.com" on a URI that's an error, the correct way is "https://www.google.com" because she's a complete URI

@OtanielJr I've had this error with link shortener links. They were https but still threw the error.

shmaltz avatar Jul 18 '23 02:07 shmaltz

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Jan 14 '24 05:01 github-actions[bot]

This issue was closed because it has been stalled for 7 days with no activity.

github-actions[bot] avatar Jan 21 '24 05:01 github-actions[bot]