Unable to resolve "react-native-webview"... about highcharts-react-native HOT 15 CLOSED

Hi @axelav,
Have you tried to run npm i react-native-webview and then npm i @highcharts/highcharts-react-native ?

from highcharts-react-native.

I solved this issue by clearing the cache and re-install react-native-webview. The steps shown as below:

1. reset cache
2. npm install react-native-webview --save
3. edit compileSdkVersion in build.gradle to 29 and buildToolsVersion to "29.0.3"
4. cd android && gradlew clean && gradlew build
5. run with react-native run-android

from highcharts-react-native.

@AbdulWahab0707 see my comments above about editing the file Webview.ios.js - it gets cached and you need to manually change it to get things working.

from highcharts-react-native.

Hi @axelav,
Have you tried to run npm i react-native-webview and then npm i @highcharts/highcharts-react-native ?

yes, I have and receive a different error:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts

from highcharts-react-native.

Unfortunatley I was not able to reproduce the problem. Could you describe step by step what you did and attach your OS details?

from highcharts-react-native.

sure, here is info on my OS & node installation:

macOS Catalina 10.15.2

node v12.15.0

npm 6.13.7

and here are steps I followed to create my project:

expo init highcharts-example --npm
cd highcharts-example
npm i @highcharts/highcharts-react-native
# copy basic usage example https://github.com/highcharts/highcharts-react-native#highcharts-chart
# from docs into Chart.js
npm start

the package.json is in my initial comment & the repo I created (it was breaking in a larger app I build, so I created this repo to test) is here: https://github.com/axelav/expo-highcharts

from highcharts-react-native.

The application still works for me.

Probably it can be related with missing metro.config.js. Have you tried to add it ? https://stackoverflow.com/questions/53314515/loading-asset-with-custom-extension-not-working

Also you can try to put files into assets

https://github.com/highcharts/highcharts-react-native#files-are-not-loaded

from highcharts-react-native.

thanks for your reply @sebastianbochan. so you are able to get the example repo I created to work? I have tried it on at least three different machines and receive the same error on every one.

I'm unclear which custom extension I would need to add for this library? it seems to only import *.js files. am I missing something there?

I don't think the suggestion to put files into assets is relevant as those directories do not exist in an expo project.

from highcharts-react-native.

I spent some time playing around with different versions of Expo and this module. When I create an Expo app using v33 of the Expo SDK, everything works fine. Any version higher than that (v34-36) of Expo, does not work and produces the error mentioned above.

From the Expo release notes:

• Expo v34 updated react-native-webview from 5.8.0 to 5.12.0
• Expo v35 updated react-native-webview from 5.12.0 to 7.0.5

If I npm i [email protected] in an Expo app running SDK v34, the app works. Doing this while running SDK v35 or greater does not work. The changes between v5 and v7 of react-native-webview seem be breaking.

From what I can tell, this module currently only works out of the box with Expo SDK v33 or lesser, though it will work with v34 with a bit of massaging. v35 and v36 do not appear to be compatible at this time.

from highcharts-react-native.

sorry for all the replies today, this was driving me crazy today and I needed to figure it out. turns out all that stuff about expo versions above was maybe not correct? I stumbled upon an issue in the react-native-webview repo and believe I found a "solution", even though it still seems like a bit of a magic trick.

react-native-webview/react-native-webview#875 (comment)

This appears to be the weirdest caching issue I've seen in a long time.

Starting from release 7.0.1 RNCWKWebView was renamed to RNCWebView on iOS. So far, so clear: the build system is still looking for the old name and isn't finding it - it's probably cached somewhere.

Eventually I dug into node_modules/react-native-webview/lib/ just to be absolutely sure that Webview.ios.js definitely doesn't have an old reference to RNCWKWebView - all looked fine, so I added a few debug print statements, at which point the build immediately started working. Then I removed the statements again (putting the file back how it was originally) and it still worked fine.

All I can think is that saving the file forced a reload on whatever was watching the file and cleared out the copy of the old version. I don't know how or where that old version was stored, or why it wasn't cleared when every piece of transient data I could think of was wiped, but at least the build is working again now!

I tried doing that same thing, dropped a debugger into Webview.ios.js, restarted my app...and everything worked. So there is some sort of insane caching going on but I can't explain it.

Anyway, I'm just putting this here in case someone else runs into this issue. Hopefully it can save them hours of stress and confusion.

from highcharts-react-native.

@axelav I really appreciate your help in the debugging.

I will add the information to our FAQ section in readme on Monday.

from highcharts-react-native.

@sebastianbochan I'm happy to have figured out the issue and to help with the debugging. sounds good on adding to FAQ. Thanks for your hard work on this library, and I appreciate you taking the time to assist me here.

from highcharts-react-native.

Im just waiting for feedback from two other users who experienced the same issue.

from highcharts-react-native.

I am stuck in the same issue

from highcharts-react-native.

Thanks, this worked for me.
We faced this issue while we upgraded the targetsdk and compilesdk to API33, then we had to update the react-native-webview version too and this error occured.
just adding debugger once in Webview.android.js worked.

from highcharts-react-native.