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

TypeError: Cannot use 'in' operator to search for 'method' in 9 #518

Closed
vmarquet opened this issue Apr 21, 2019 · 11 comments
Closed

TypeError: Cannot use 'in' operator to search for 'method' in 9 #518

vmarquet opened this issue Apr 21, 2019 · 11 comments
Labels
Type: bug report

Comments

@vmarquet
Copy link

I had this code working in version 5.0.1:

<WebView
    source={require('page.html')}
/>

and in 5.7.0, it crashes on Android (still works on iOS):

Capture d’écran 2019-04-20 à 23 26 58

I'm assuming that it happens because of this line, introduced by the js to ts rewrite (this commit).

It seems the author of this rewrite forgot to handle using require in the source prop.

I'm currently bypassing the problem this way:

<WebView
    source={{uri: Image.resolveAssetSource(require('page.html')).uri}}
/>

This should be fixed though and a test should be added to ensure it doesn't happen again.
@Titozzz
Copy link
Collaborator

Titozzz commented Apr 22, 2019

@vmarquet Docs never specified you syntax should have worked which is why you encountered that issue.
See (docs)[https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#source].

Regarding

This should be fixed though and a test should be added to ensure it doesn't happen again.

If you think changes need to be done in a repository, please submit a pull request, since you already spent time to track the bug, it's even more enjoyable.

@Titozzz Titozzz closed this as completed Apr 22, 2019
@danielgindi
Copy link

@Titozzz This answer is a bit weird, as the code clearly tries to accept an Image identifier, but a bug precedes that piece of code and prevents it. So it clearly is a bug, no matter what the docs say...

@Titozzz
Copy link
Collaborator

Titozzz commented Apr 29, 2019

You usually want to base your code on how it is documented, not implemented because the implementation can change any time

@vmarquet
Copy link
Author

@Titozzz Because the documentation cannot change?

Capture d’écran 2019-04-29 à 14 06 06

Do you really expect people to read the entire documentation and notice the api changes at every update? No, that's why you should not drop features silently, that's why properly managed projects have a changelog file, but there is none in this repository.

@Titozzz
Copy link
Collaborator

Titozzz commented Apr 29, 2019

https://github.com/react-native-community/react-native-webview/releases

@paldepind
Copy link

I am also experiencing this issue after moving from the WebView in react-native to this WebView.

If I change this line as follows.

- if (source && 'method' in source) {
+ if (typeof source !== 'number' && source && 'method' in source) {

Then the problem goes away. However, then I simply run into this bug instead.

If <WebView source={require('page.html')} /> is no longer supported is there then another way to load a local HTML file into a WebView?

@paldepind paldepind mentioned this issue Jul 10, 2019
Closed
@animaonline
Copy link

This should be reopened and looked into @Titozzz

@paldepind paldepind mentioned this issue Jul 30, 2019
Closed
@paldepind
Copy link

Here's a workaround we used to get around this issue after upgrading from Expo 32 (which includes the react-native webview) to Expo 33 (which includes react-native-webview):

1/ Create a Webpack setup that bundles our local HTML, JS, CSS and icons fonts into a single self-contained HTML file.
2/ Write a small script that creates a JS file of the form export default "<html>.....</html>" based on the HTML bundle.
3/ Simply import the JS file and load the HTML string into the WebView with source={{ html: htmlString }}.

In case this is useful to anyone I've shared the script and the Webpack setup in a Gist here: https://gist.github.com/paldepind/8cbc430575cd075144d291b0eff463fc

@Titozzz
Copy link
Collaborator

Titozzz commented Aug 2, 2019

@paldepind what happens if you use

<WebView source={{ html: require('page.html') }} />

?

@paldepind
Copy link

@Titozzz Thank you for the comment and the great work you do on react-native-webview.

Using source={{ html: require('page.html') }} does not work for me. require returns a number and on iOS I simply get a webview with that number as its content. On Android I get the error "Value for html cannot be cast from Double to String". It seems that the html property does not handle the resource id's returned by require.

@bovesan bovesan mentioned this issue Apr 8, 2020
Merged
@rkeiii rkeiii mentioned this issue Aug 25, 2021
Closed
@bfelbo
Copy link

bfelbo commented Nov 14, 2021

Here's a workaround we used to get around this issue after upgrading from Expo 32 (which includes the react-native webview) to Expo 33 (which includes react-native-webview):

1/ Create a Webpack setup that bundles our local HTML, JS, CSS and icons fonts into a single self-contained HTML file. 2/ Write a small script that creates a JS file of the form export default "<html>.....</html>" based on the HTML bundle. 3/ Simply import the JS file and load the HTML string into the WebView with source={{ html: htmlString }}.

In case this is useful to anyone I've shared the script and the Webpack setup in a Gist here: https://gist.github.com/paldepind/8cbc430575cd075144d291b0eff463fc

Thanks a lot for sharing this @paldepind!

It’s been two years and there’s been a lot of updates to this repo. I’d be curious to hear if your approach still works for you?

@TheAlmightyBob TheAlmightyBob mentioned this issue Nov 26, 2022
Closed
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
6 participants
@danielgindi @paldepind @animaonline @Titozzz @vmarquet @bfelbo