Unable to resolve "react-native-webview"...

[axelav]

I'm unable to get a basic chart working using a clean expo app.

expo init highcharts-example --npm # using yarn does not resolve the issue
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

Unable to resolve "react-native-webview" from "node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js" Failed building JavaScript bundle.

I know there have been recent changes with react-native-webview - perhaps they may be causing this issue.

I've created a sample repo for the issue: https://github.com/axelav/expo-highcharts

I'll paste in the package.json here as well.

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@highcharts/highcharts-react-native": "^2.1.1",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

[sebastianbochan]

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

[axelav]

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

[sebastianbochan]

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

[axelav]

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

[sebastianbochan]

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

[axelav]

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.

[axelav]

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 react-native-webview@5.8.0 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.

[axelav]

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.

[sebastianbochan]

@axelav I really appreciate your help in the debugging.

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

[axelav]

@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.

[sebastianbochan]

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

[AbdulWahab0707]

I am stuck in the same issue

[axelav]

@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.

[adifdwimaulana]

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

[abhyudaysoni03]

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.