Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Invariant Violation: Failed to call into JavaScript module method WebViewMessageHandler1.onMessage() #3395

Open
rhenandias opened this issue Apr 10, 2024 · 11 comments
Open

Invariant Violation: Failed to call into JavaScript module method WebViewMessageHandler1.onMessage() #3395

rhenandias opened this issue Apr 10, 2024 · 11 comments
Labels
Type: bug report

Comments

@rhenandias
Copy link

Bug description:

The minimum execution example in the documentation for the window.ReactNativeWebView.postMessage method does not work when using version ^13.

To Reproduce:

After installing the module with the following command npm install react-native-webview, the package installed is version "react-native-webview": "^13.8.4", and with this package, the minimum example returns the following error:

Invariant Violation: Failed to call into JavaScript module method WebViewMessageHandler1.onMessage(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 12): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient, AppRegistry, RCTEventEmitter, RNCWebViewMessagingModule.
          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

The code provided in the documentation:

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    const html = `
      <html>
      <head></head>
      <body>
        <script>
          setTimeout(function () {
            window.ReactNativeWebView.postMessage("Hello!")
          }, 2000)
        </script>
      </body>
      </html>
    `;

    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ html }}
          onMessage={(event) => {
            alert(event.nativeEvent.data);
          }}
        />
      </View>
    );
  }
}

However, when downgrading to version 11 with the package npm install react-native-webview@11 the version "react-native-webview": "^11.26.1" is installed, and with this version the same code works normally as expected.

Environment:

  • OS: Ubuntu
  • OS version: Ubuntu 20.04.6 LTS
  • react-native version: 0.73.6
  • react-native-webview version (working): 11.26.1
  • react-native-webview version (bug): 13.8.4
  • expo version: 50.0.14
@gaisdav
Copy link

gaisdav commented Apr 15, 2024

same error

@AreebGhani
Copy link

npm i react-native-webview@13.6.4

It will work for me.

@gaisdav
Copy link

gaisdav commented Apr 15, 2024

@AreebGhani yes, also for me, thank you!

@rhenandias
Copy link
Author

@AreebGhani Can confirm, for me the npm i version react-native-webview@13.6.4 also solved the problem, I'm following this more up-to-date version than ^11. Thanks!

@AreebGhani
Copy link

@rhenandias It seems there's a compatibility issue or a bug in the latest version (13.8.5) that may be fixed soon.

@sausti sausti mentioned this issue Apr 19, 2024
Merged
@smlparry
Copy link

smlparry commented Apr 22, 2024 •
edited

Any update on this? or is there something I can do to get this running in the meantime?

I require the update introduced in 13.8.5 (which apparently also broke this 😢)

EDIT:

Wow, I didn't realise the differences between iOS and Android here. For anyone coming across this issue I was able to also fix this by downgrading to 13.6.4 but then also making sure NOT to pass "*" to the .postMessage function": #323 (comment)

😵

@Abdullah-z
Copy link

Abdullah-z commented Apr 23, 2024 •
edited

Getting the same error when using "react-native-webview" with "react-native-fusioncharts": "^5.2.3"

"expo": "~50.0.17",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-fusioncharts": "^5.2.3",
"react-native-webview": "13.6.4",

even downgrading to version 11 and 12 did not resolve the issue.

@flytomek
Copy link

The same error here for "react-native-webview": "^13.8.6".

Downgrading the package via npm i version react-native-webview@13.6.4 solved the issue.

@JungHsuan
Copy link

Downgrading to version react-native-webview@13.6.4 doesn't solve the issue for me.

@rhenandias
Copy link
Author

The issue seems to be with compatibility with Expo. I needed other modules that weren't compatible with Expo, so I created a project in bare React Native, and the latest version works as expected.

@techneocareu
Copy link

techneocareu commented May 12, 2024 •
edited

We are having the same issue?

My dependencies:
"dependencies": {
"expo": "^51.0.2",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-webview": "13.6.4"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.2.45",
"typescript": "^5.1.3"
},

Anyone have a solution?

EDIT: I've solved the issue
npx expo install --fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: bug report
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@smlparry @JungHsuan @rhenandias @flytomek @gaisdav @Abdullah-z @AreebGhani @techneocareu