Closed
Description
Description
I'm receiving this error (same as screenshot below):
Setting onMessage on a WebView overrides existing values of window.postMessage,
but a previous value was defined.
That specific error message is found in the code base here: https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m#L286
Implementation
I followed the example at this link for onMessage at this link: http://facebook.github.io/react-native/releases/0.37/docs/webview.html#examples
I made a callable respondToOnMessage
and injected some JavaScript.
class MessagingTest extends React.Component {
respondToOnMessage = e =>{
console.log(e);
};
render() {
const jsCode = `window.postMessage('test');`;
return (
<WebView
injectedJavaScript={jsCode}
source={uri: 'https://www.foo.com/'}}
onMessage={this.respondToOnMessage}
/>
)
}
}
Reproduction
I load the app with this example and I have it pointed to a website (rather not say which one. Sorry.) And the website is emitting 2 errors into the Chrome console when I go there.
(index):994 A Parser-blocking, cross-origin script, http://example.com/thing.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.
widgets.js:8 Uncaught TypeError: Cannot set property '[object Array]' of undefined(…)
Other websites like google.com and github.com are just fine. If you want to replicate it, change the uri
to yahoo.com
Additional Information
- React Native version: 0.37
- Platform: iOS 10.1, iPhone 6 emulator
- Operating System: Mac OSX Sierra 10.12.1
Activity
raiderrobert commentedon Nov 10, 2016
I should also add that I attempted to replicate the error on Android 7.0 and API 24 using a Nexus_5x emulator, and I got NO error. So this seems to be a platform specific error.
sreucherand commentedon Nov 11, 2016
I'm getting the same error. Seems like this exception is thrown when
window.postMessage
has been overwritten. But sincewebViewDidFinishLoad
is called multiple times, it tries to overwrite window.postMessage over and over. Not sure though. Can we have you expertise @jacobp100?jacobp100 commentedon Nov 11, 2016
It’s because the page you’re visiting is overriding
postMessage
, which may be due to a shim. Showing an error was chosen over invoking the shim’s value ofpostMessage
when you call the value ofpostMessage
that we set.I thought I’d made it easier to workaround this problem, but it looks like that won’t work. The best you can do at the moment, which is an awful hack, is,
Or just fork the project and remove the code you pointed to. Whatever’s easiest for you!
Ping @satya164 for input on how to resolve.
sreucherand commentedon Nov 11, 2016
Well, when I try
String(window.postMessage) === String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage')
on the page I visit, it returnstrue
, so I am guessingpostMessage
has not been overridden.jacobp100 commentedon Nov 11, 2016
Oh I see. The JS is injected after postMessage is overwritten. Your best bet is to fork it then, and I’ll see what I can do about getting this fixed! Sorry. :(
persyl commentedon Nov 20, 2016
I have same error, without injecting any javascript to WebView - just setting WebView-properties:
source={require('../lib/html/somefile.html')}
onMessage={() => console.log('Hello World')}
and in my ../lib/html/somefile.html' I have javascript code doing both window.postMessage() and document.addEventListener("message",.......
Everything worked fine when I had the HTML in a variable "someHtml", like:
source={{html: someHtml}}
So difference seem to be when changing source to HTML-file instead of HTML-string.
Still for me I had other reasons, not related to this, why I really need to read HTML from file instead of string so it would be great to get this issue fixed.
cbcye commentedon Nov 20, 2016
+1, still has this problem
jacobp100 commentedon Nov 20, 2016
There is an ongoing discussion in #10941 for the best way to go forward with this.
It won't be in the next release or probably the release after. If you need this fixed now, fork the project and use the fix in the PR.
lealife commentedon Dec 19, 2016
+1, I'm getting the same error. When there is a
iframe
on web, it occurs the same errorvarhp commentedon Dec 21, 2016
+1,encounter this problem
jacobp100 commentedon Dec 21, 2016
Again, there is a pr for this. We're aware this problem is affecting a lot of people.
edencakir commentedon Dec 26, 2016
+1 getting the same error.
kyle-ilantzis commentedon Dec 31, 2016
injectedJavascript should instead be the following
And then it works! 😄
And if any one is interested, in my code instead of writing a giant string I did the following
mschipperheyn commentedon Jan 21, 2017
@kyle-ilantzis tried this with RN 0.38.1, but still get the Red Screen. What version of RN are you on?
115 remaining items