Chart not redering in iOS about highcharts-react-native HOT 58 CLOSED

Same issue solved with useCDN

Error: '@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts

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

from highcharts-react-native.

Im getting the same error. Even if I use useCDN the error still appears, but the chart renders.

from highcharts-react-native.

Same error

from highcharts-react-native.

I was able to run with the useCDN / useSSL flags without any problems.

ps. I noticed that when I set flex:1 - webview disappears in the newest 8.0.2 version.
ps2. The app is only in RN not in Expo.

Are you able to share your simplified apps?

from highcharts-react-native.

I have the following set and the chart doesn't show:
useCDN={true}
useSSL={true}

from highcharts-react-native.

I upgraded to ^2.2.1 and the issue seems to have resoled itself

from highcharts-react-native.

We just finished testing the wrapper and released the beta version which is available here https://github.com/highcharts/highcharts-react-native/tree/beta-3

Any feedback will be really helpful.

Please keep in mind, that all packages should be in the latest versions of them. Number of versions are declared also in the package.json file.

from highcharts-react-native.

I was not able to reproduce the issue at this moment, but one of our users reported me also similar problem and solved it by coping files to the right direction.

I've managed to get the library working by adding the highcharts-layout & highcharts-files directories into the Copy Bundles Resources section in Build Phases within Xcode, and changing the webview source prop to source={{ uri: 'highcharts-layout/index.html' }}.

Can you verify it?

Meanwhile Im in touch with our iOS developer, when I will let you know when receive any feedback.

from highcharts-react-native.

@ControlAltDel01
It looks like problem with incorrect paths of files in your project. Have you tried to move them to assets/android

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

Related topic: #46

@manohargunduboina-gep does the problem appear in android / ios or both?

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

from highcharts-react-native.

I did test adding css and js to assetExts like @manohargunduboina-gep

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = {
  resolver: {
    assetExts: [
      ...defaultAssetExts,
      "js",
      "css"
    ]
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

I get the following error:

2020-02-26 13:31:41.904 [fatal][tid:main] Unhandled JS Exception: undefined is not a function (near '...stry").registerAsset({...')

http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1288:203
loadModuleImplementation@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:271:14
http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1278:31
loadModuleImplementation@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:271:14
guardedLoadModule@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:163:47
global code@http://192.168.0.111:8081/index.bundle?platform=ios&dev=true&minify=false:1297:4

Not sure what it means.

from highcharts-react-native.

For me on iOS, it works with

useCDN={true}
useSSL={true}

But only after I fixed a bug here for onMessage for WebView
onMessage = {this.props.onMessage ? (event) => this.props.onMessage(event.nativeEvent.data) : {} }
The bug is that if you do not pass in onMessage, it defaults to empty object {} instead of empty function ()=>{} which will cause error when the code tries to call it somewhere.
After making {} into ()=>{} it works.

Oh and also add css to resolver.assetExts in metro.config.js

Nevertheless, using it without CDN still causes this metro bundler issue, even after I copied the files to ios folder
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
To which if I add js to assetExts it'll crash the bundler.

I'm happy to just use the CDN version for now though : )

from highcharts-react-native.

Thank you @kdenz. Lets wait for the feedback from other users.

@scabezasiq @manoharglm @mrinal-roy-au2 any comments about the solution?

from highcharts-react-native.

The charts are still not loading without useCDN but as @kdenz mentioned in the comment it'll fix the onMessage issue

from highcharts-react-native.

I'm running on react-native 0.62.0 (no expo) and can't get the chart to show up on IOS. I've added added css to the metro config and am running the latest version of this library(^2.1.2) and node (v14). I've also added the "highcharts-files" and "highcharts-layout" folders to /ios

There's nothing special to my chart, so i don't see why it only renders a blank screen. The loader animation is the only thing that briefly shows up:

<HighchartsReactNative
styles={styles.container}
loader={true}
useCDN={true}
useSSL={true}
options={{series: [ {data: [1, 2, 3]}]}}
/>

I went into the the library in my node_modules and hard coded a uri to the webview and it loaded fine, so the issue is with rendering the highchartsLayout

from highcharts-react-native.

@Niravpatel129 which RN version are you running? were you able to get the charts to appear? Mine are showing a blank screen, where the component should render in the View

I'm using React Native Expo latest version

  <HighchartsReactNative
        useCDN={true}
        useSSL={true}
        styles={styles.container}
        options={chartOptions}
      />

the above is an example of what my chart looks like and yeah it seems to work perfectly minus a issue with landscape mode which may be from webview and not highcharts itself.

from highcharts-react-native.

We are wokring on that and debugging the problem. Can be related with new versions of modules.

Thankfully, we are able to reproduce the problem.

I will inform you about progress, when find a reason of issue.

from highcharts-react-native.

Hi @VictorVilelaDuarte,
Thank you for contacting us. Do you receive any errors? Let me know about your version of RN / React / iOS etc.

Do you use debug or production mode?

from highcharts-react-native.

Probably the highcharts.js and styles files are stored in the wrong path of application. Have you tried to move to local iOS application locations like other users suggested?

from highcharts-react-native.

Probably the highcharts.js and styles files are stored in the wrong path of application. Have you tried to move to local iOS application locations like other users suggested?

of course ，according this -> https://github.com/highcharts/highcharts-react-native#files-are-not-loaded

from highcharts-react-native.

I also have this issue. I can set useCDN and useSSL to true and it works, but still get the following error in metro bundler output.

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:34:55 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

I also need the charts to be accessible offline. If i don't set useSSL and useCDN the charts are not rendering and i get the following output.

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:39:08 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:356:13
at Generator.next ()
at asyncGeneratorStep (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:52:24)
at _next (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:72:9)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:77:7
at new Promise ()
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:69:12
at getAsset (/Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Assets.js:337:20)
at /Users/something/Documents/repos/highcharts-react-native-testing/testingProject/node_modules/metro/src/Server.js:992:28
at Generator.next ()
::ffff:192.168.0.101 - - [30/Jan/2020:14:39:08 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js HTTP/1.1" 404 - "http://192.168.0.111:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 12_4_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

I did test and change the webview source prop to source={{ uri: 'highcharts-layout/index.html' }} as @sebastianbochan commented above. The error disappeared but the chart are still not rendering.
My repo is https://github.com/ControlAltDel01/highcharts-react-native-testing

from highcharts-react-native.

In the slow internet scenarios my network call getting succeeded and chart is appearing blank in some cases so the useCDN isn't a solution for some cases

I tried this and it didn't worked for me

from highcharts-react-native.

@ControlAltDel01 @manohargunduboina-gep do you use expo project or native RN / xCode?

from highcharts-react-native.

@sebastianbochan xCode

from highcharts-react-native.

@sebastianbochan Also xCode

from highcharts-react-native.

@ControlAltDel01 will check your project on Monday and debug the problem.

Thank you for the input.

from highcharts-react-native.

@sebastianbochan As the title of the issue, I have problem with iOS. I did not set up the repo for android. But I have tried it on android on another repo and it works without any problems.

from highcharts-react-native.

How about add metro.config.js ?

from highcharts-react-native.

@sebastianbochan It used to work in android but currently its not working on either I tried updating my metro.config.js using extraNodeModules and I didn't got any result

My current metro.config.js

module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: false, }, }), }, };

from highcharts-react-native.

Right, but still assetExts is missing there.

from highcharts-react-native.

I tried this earlier and its not working can you suggest any changes

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;

module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: false, }, }), }, resolver: { assetExts: [ ...defaultAssetExts, "css", "js" ] } };

from highcharts-react-native.

@ControlAltDel01 It looks like a problem with bundler but not with wrapper I guess.

from highcharts-react-native.

@sebastianbochan do you have a minimal working example with and without Expo using bundled files? To me it seems like perhaps it's not possible to bundle js files with the metro bundler and thus it may not be possible to use the dynamic xhr approach in HighchartsReactNative.

There are other ways to load assets in at least Expo that may work. Using, for example, https://docs.expo.io/versions/latest/sdk/asset/. Perhaps there's some similar support in clean RN?

from highcharts-react-native.

@ControlAltDel01 @manohargunduboina-gep

One of our users found that the reason of issue is in ... new webview.

Ref to webview issue:

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

Solution:
Put a debugger into Webview.ios.js and restart the app.

Related thread:

• #48

Could you test in your apps and let us know about results?

@J-Zeitler
When you download the github repo, this is simple expo app.

App without expo is available here: https://github.com/highcharts/highcharts-react-native/tree/example-demo

from highcharts-react-native.

I could run my app with Highcharts getting rendered in android. But I am getting error as below in iOS:

Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css' cannot be loaded as its extension is not registered in assetExts
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:356:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:52:24)
    at _next (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:72:9)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:77:7
    at new Promise (<anonymous>)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:69:12
    at getAsset (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:337:20)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Server.js:992:28
    at Generator.next (<anonymous>)
::1 - - [16/Mar/2020:09:59:33 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/css/styles.css HTTP/1.1" 404 - "http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
Error: 'node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js' cannot be loaded as its extension is not registered in assetExts
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:356:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:52:24)
    at _next (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:72:9)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:77:7
    at new Promise (<anonymous>)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:69:12
    at getAsset (/Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Assets.js:337:20)
    at /Users/techprescient/Desktop/searchtoiletapp/node_modules/metro/src/Server.js:992:28
    at Generator.next (<anonymous>)
::1 - - [16/Mar/2020:09:59:33 +0000] "GET /assets/node_modules/@highcharts/highcharts-react-native/highcharts-files/highcharts.js HTTP/1.1" 404 - "http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=775baec528c94a8295a3828ef8922a40" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"

from highcharts-react-native.

Im debugging the problem and will update you when end of the process.

from highcharts-react-native.

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

Related thread: #4

from highcharts-react-native.

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

Related thread: #4

I tried this solution but didn't work. I have the highchart's folders on /ios folder but the charts don't load.

In android, charts works fine.

from highcharts-react-native.

Great.. Thanks for the fix @kdenz

from highcharts-react-native.

@manoharglm does it work for you too?

from highcharts-react-native.

How about using CDN and SSL? It also does not work?

from highcharts-react-native.

I have the following set and the chart doesn't show:
useCDN={true}
useSSL={true}

^ using these options I had the chart show but I'm still given this error

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

from highcharts-react-native.

Regarding to issues with metro, one of our users share his solution for the problem:

metro config

module.exports = (async () => {
  const {
      resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
      transformer: {
          getTransformOptions: async () => ({
              transform: {
                  experimentalImportSupport: false,
                  inlineRequires: false,
              },
          }),
      },
      resolver: {
        sourceExts,
        assetExts: [...assetExts, 'css'],
      },
  }
})()

Related thread: #4

Add to your metro.config to solve the css error. How did you get your chart to show? which version of react-native are you running and are you using expo?

from highcharts-react-native.

bump

from highcharts-react-native.

Regarding to issues with metro, one of our users share his solution for the problem:

I'm using Expo and I created the metro.config.js file in my root, with the following code:

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      sourceExts,
      assetExts: [...assetExts, 'css'],
    },
  };
})();

I'm getting the following error message:

error getDefaultConfig is not defined. 

ReferenceError: getDefaultConfig is not defined

EDIT:
found the import
was missing:
const { getDefaultConfig } = require('metro-config');

No more error :D

from highcharts-react-native.

@Niravpatel129 which RN version are you running? were you able to get the charts to appear? Mine are showing a blank screen, where the component should render in the View

from highcharts-react-native.

Updating metro-config.js with the aforementioned code AND adding useCDN and useSSL fixed the error (for me) but nothing is rendered, even though I've got very simple data going in. Additionally, the styles (backgroundColor) are never applied.

...
    const styles = StyleSheet.create({
      container: {
        background: "#000"
      }
    });

    return (
      <HighchartsReactNative
        useCDN={true}
        useSSL={true}
        options={{
          series: [{
            data: [1, 2, 3]
          }]
        }}
        modules={["highcharts-more"]}
        styles={styles.container}
      />
    );

from highcharts-react-native.

I'd like to make a note that the chart I was initially trying to render was also a stock chart. These aren't supported with the highcharts-react-native library. https://www.highcharts.com/forum/viewtopic.php?t=43300

If you need this type of chart in your project, the alternative is:
https://github.com/TradingPal/react-native-highcharts

from highcharts-react-native.

Update: I cleared my metro cache and it renders the chart now but I still get the error. If you're using expo, you can simply type shift + r to restart the bundler and clear the cache.

That being said, the styles still don't make it through.

from highcharts-react-native.

@sebastianbochan @kdenz it works fine now in iOS with

useCDN={true}
useSSL={true}

from highcharts-react-native.

Thank you @kdenz. Lets wait for the feedback from other users.

@scabezasiq @manoharglm @mrinal-roy-au2 any comments about the solution?

it works.
Thanks @kdenz

from highcharts-react-native.

No progress on using it without useCDN={true}, i.e. using local files?

from highcharts-react-native.

@mrinal-roy-au2
Could you create a quick PR with your changes which solved the problem? I will verify it and merge for other users.

from highcharts-react-native.

Any updates on this one? I am still getting the error related to styles.css, tried all the options discussed here, even the metro.config.js technique didn't fix the error.
Thanks

from highcharts-react-native.

+1

from highcharts-react-native.

Thanks @sebastianbochan and your team for a good library.
I just abled to render chart on iOS with useCDN={false}. The solution worked for the both debug & release configuration. But it required some setups as following:

1. I created a .bundle file (E.g.: Highcharts.bundle). Then moving two folders: highcharts-layout & highcharts-files into the bundle.
2. Add the bundle to iOS project.
3. Update some code in HighchartsReactNative.js

• Change highchartsLayout assign statement for loading layout from the bundle instead of module

highchartsLayout = (Platform.OS == 'ios') ? 
    require('../highcharts-layout/index.html') : { uri: (props.devPath || 'file://') + '/android_asset/highcharts-layout/index.html' };

-->

highchartsLayout = (Platform.OS == 'ios') ? 
    { uri: 'Highcharts.bundle/highcharts-layout/index.html' } : { uri: (props.devPath || devPath) + '/android_asset/' + 'Highcharts.bundle/highcharts-layout/index.html' }

• Adding more condition (this.status == 0 || this.status == 200) for script request. As status == 200 is for webservice only, for locally, it should be zero.

if (this.readyState == 4 && this.status == 200)

-->

 if (this.readyState == 4 && (this.status == 0 || this.status == 200))

For android, It required to place Highcharts.bundle to android/app/src/main/assets folder

from highcharts-react-native.

Hi @sebastianbochan with new approach, is the performance as good as old approach?

from highcharts-react-native.

The most important thing was change the way of loading local (and from CDN) files and fix some small bugs. The performance increase due to non-using simulations of ajax.

from highcharts-react-native.

The new 3.0 version is released.

Im closing this ticket. If you will encounter any problems, please create a new ticket. In this case we will avoid confusing and keep the newest version on track.

from highcharts-react-native.