Not rendering in iOS release mode #104

horstleung · 2020-09-07T11:42:51Z

getting error:

Failed to fetch scripts or layout. File 'file:///{USER_PATH}/Library/Developer/CoreSimulator/Devices/D53BDBF8-65D5-4AC5-9436-39A94EF1CE60/data/Containers/Data/Application/879BAB8F-D419-4908-8317-01B556F7BCFA/Library/Caches/ExponentAsset-ffceb4b4585b380fc666d3882abee7e5.html' could not be read.

The text was updated successfully, but these errors were encountered:

horstleung · 2020-09-08T07:18:02Z

Hotfix

Modifiy setLayout in HighchartsReactNative.js

setLayout = async () => {
        const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
        this.setState({
            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
        })
    }

@Denyllon I don't understand the original flow (downloading a local file to cache folder and read that).

Denyllon · 2020-09-09T14:54:39Z

@fattomhk We need to load the local index.html file and register it as an asset, read it as a string, and then pass as the html value for Webview here:

highcharts-react-native/dist/src/HighchartsReactNative.js

Lines 209 to 213 in 64f6d61

    
           source = { 
        
               { 
        
                   html: this.state.layoutHTML 
        
               } 
        
           }

Could you provide us with the minimal project where the problem occurs?

horstleung · 2020-09-10T02:52:28Z

Sorry for not setting up a repo as I made this in work.

Here is the minimal project.(setup ios only.)
https://drive.google.com/file/d/1L1L9iJITAPfWbu5h4i5fYtJYTTVeIxMZ/view?usp=sharing

You can run yarn ios to show the chart.
But if can't see any if you run it through XCode (as I set the target to release mode).

there is a patch in patches folder for my hotfix.
you can apply it by npx patch-package

Denyllon · 2020-09-14T09:25:43Z

@fattomhk Thank you. We will take a look on it as soon as possible.

vinasgo · 2020-09-14T17:07:47Z

I have the same problem. In debug mode it works perfectly, but in realease mode I get this error message on Xcode. "Failed to fetch scripts or layout. File 'file:///Users/Vinas/Library/Developer/CoreSimulator/Devices/C375A33E-EFA3-4983-B644-2E66FFD7C5BA/data/Containers/Data/Application/868BF4A0-E28C-4C4F-9485-95D94CA0BB3C/Library/Caches/ExponentAsset-ffceb4b4585b380fc666d3882abee7e5.html' could not be read."

jenniferburch · 2020-09-15T17:11:02Z

Is there any update on this ticket? I'm not getting any charts on a real iOS device. (in the emulator it's fine)

vinasgo · 2020-09-15T17:36:30Z

Hotfix

Modifiy setLayout in HighchartsReactNative.js
setLayout = async () => {
        const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
        this.setState({
            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
        })
    }
@Denyllon I don't understand the original flow (downloading a local file to cache folder and read that).

It works!

horstleung · 2020-09-16T02:19:23Z

@jenniferburch If you are rushing, you might apply my hotfix yourself or apply the patch in my google drive's zip by copying patches folder to your project and run npx patch-package.

I don't understand the original flow otherwise I would create a pull request. So, if you are not rushing, you better wait for the official fix.

aditya1711 · 2020-09-17T17:45:29Z

Hotfix

Modifiy setLayout in HighchartsReactNative.js
setLayout = async () => {
        const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
        this.setState({
            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
        })
    }
@Denyllon I don't understand the original flow (downloading a local file to cache folder and read that).

This doesn't work for me. With a different but similar error message.

Failed to fetch scripts or layout. File 'file:///{USER_PATH}/Library/Developer/CoreSimulator/Devices/00C9E684-010E-45E1-AE2E-48FF90A469B9/data/Containers/Data/Application/D50BE37B-07F2-4800-B853-18066208FCA2/Library/Caches/ExponentAsset-854c52eea1c8666bdc81b6d4f0a46808.hcscript' could not be read.

horstleung · 2020-09-18T02:15:21Z

Hotfix

Modifiy setLayout in HighchartsReactNative.js
setLayout = async () => {
        const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
        this.setState({
            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
        })
    }
@Denyllon I don't understand the original flow (downloading a local file to cache folder and read that).
This doesn't work for me. With a different but similar error message.

Failed to fetch scripts or layout. File 'file:///{USER_PATH}/Library/Developer/CoreSimulator/Devices/00C9E684-010E-45E1-AE2E-48FF90A469B9/data/Containers/Data/Application/D50BE37B-07F2-4800-B853-18066208FCA2/Library/Caches/ExponentAsset-854c52eea1c8666bdc81b6d4f0a46808.hcscript' could not be read.

My hotfix is solving the html asset loading problem only.

I think that is the same problem with the html one.

a guess, haven't tried:

addScript = async (name, isModule, useCDN) => {
        if(useCDN) {
            const response = await fetch(
                httpProto + cdnPath + (isModule ? 'modules/' : '') + name + '.js'
            ).catch((error) => {
                throw error
            })
            stringifiedScripts[name] = await response.text()
        } else {
            const script = Asset.fromModule(
                isModule &&
                name !== 'highcharts-more' &&
                name !== 'highcharts-3d' ?
                HighchartsModules.modules[name] : HighchartsModules[name]
            )
            stringifiedScripts[name] = await FileSystem.readAsStringAsync(script.uri) 
// origin: await this.getAssetAsString(script)
        }
    }

Btw, maybe setting useCDN would get through the script loading part.

Denyllon · 2020-09-18T15:40:55Z

@fattomhk Apologize for that takes so long, though unfortunately I still haven't had chance to run your project due to general overload of work this week (many things to close in other projects before going on vacation). I will get back to this issue right after back to the office (29th of September).

Kind regards, and than you for your patience!

horstleung · 2020-09-21T01:36:59Z

nvm, enjoy your holiday.

zjhiphop · 2020-09-21T09:27:42Z

I also have this issue, and can not resolve with the above solution.

jenniferburch · 2020-09-21T19:36:11Z

The patch did work in my project if running from Xcode but is still broken if running through the command line, react-native run-ios, (still unable to fetch the script) but as a stop gap (and this is a SUPER hack), in src/HighChartsReactNative.js

comment out the contents of setLayout
in the render() method, change the WebView source to be:
source = {
{
html: COPY PASTE THE CONTENTS OF ../highcharts-layout/index.html
}
}

You will also need to set useCDN={true} when you render

horstleung · 2020-09-22T01:54:43Z

The patch did work in my project if running from Xcode but is still broken if running through the command line, react-native run-ios, (still unable to fetch the script) but as a stop gap (and this is a SUPER hack), in src/HighChartsReactNative.js

comment out the contents of setLayout

in the render() method, change the WebView source to be:
source = {
{
html: COPY PASTE THE CONTENTS OF ../highcharts-layout/index.html
}
}

You will also need to set useCDN={true} when you render

What error did you get after applying the patch and set useCDN to true?

jenniferburch · 2020-09-23T19:41:56Z

@fattomhk error in debugger: ExceptionsManager.js:179 Failed to fetch scripts or layout. Unsupported URI scheme for 'http://localhost:8081/assets/node_modules/@highcharts/highcharts-react-native/highcharts-layout/index.html?platform=ios&hash=ffceb4b4585b380fc666d3882abee7e5'

Denyllon · 2020-10-07T10:24:46Z

Hello @fattomhk @jenniferburch @zjhiphop,
Sorry for that it takes so long, but this problem is very complex, and unfortunately there is no any quick/simple solution to get rid of it, because the FileSystem and Asset objects from react-native-unimodules have significant differences in a process of how they work on different environments (Simulators, real devices, operating systems).

For example, when using the Asset.asyncDownload() on iOS Simulator, all files are downloaded into the FileSystem.cacheDirectory and because of that fact we are able to avoid downloading them multiple times one by one, by checking whether are they already downloaded in the mentioned directory. In case of running the app on a real device, files are not available there though, and they have completely different path structure.

Furthermore, while I've tried to always use the path from downloaded asset localUri property, then it breeds further problems. When having (let's say) about 20 charts with multiple modules (funnel, range, bullet etc.) in one App, then, I guess, it generates too many file read requests, and then the error is thrown from FileSystem. For some reason it is not able to read the file... but only on Simulators though.

As you can see, for now, we are not able to give you any perfect and universal solution, which could be applied to resolve all of reported issues.
We definitely need to discuss the architecture of managing files in this wrapper, and find some compromise. That means, it can takes a while.

Kind regards!

wzhang2 · 2020-10-07T10:30:54Z

is this only happening on some versions of react native? we just updated to rn63.3, and now we are seeing this issue, but was fine on 61.2 with react-native-unimodules on 0.7.0

Denyllon · 2020-10-07T10:56:52Z

I guess that's what it comes to. Or, the react-native-unimodules works differently with different React Native versions. The problem is very complex, most probably nested somewhere in the dependent packages, and it's hard to find out what causing the issue.

AnthonyTailer · 2020-10-14T13:16:05Z

I'm getting the same behavior here.
After upgrade my project from RN 0.61.5 to 0.63.3 and using Xcode 12. Works on Debug but not in Release mode.

I have tried the suggestions above. The one that worked was the "guess" comment by @fattomhk.

So I applied this patch with patch-package and set useCDN as false on HC component options:

diff --git a/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js b/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
index fabd55a..c284c26 100755
--- a/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
+++ b/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
@@ -74,15 +74,14 @@ export default class HighchartsReactNative extends React.PureComponent {
                 name !== 'highcharts-3d' ?
                 HighchartsModules.modules[name] : HighchartsModules[name]
             )
-            stringifiedScripts[name] = await this.getAssetAsString(script)
+            stringifiedScripts[name] = await FileSystem.readAsStringAsync(script.uri)
         }
     }
 
     setLayout = async () => {
         const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
-
         this.setState({
-            layoutHTML: await this.getAssetAsString(indexHtml)
+            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
         })
     }

My package.json:

{
  "@highcharts/highcharts-react-native": "^3.1.2",
  "react": "16.13.1",
  "react-native": "0.63.3",
  "react-native-unimodules": "^0.11.0",
  "react-native-webview": "^10.9.2",
}

zjhiphop · 2020-10-21T11:05:10Z

@AnthonyTailer @fattomhk I tried your solution in develop mode, it reported "Failed to fetch scripts or layout. Unsupported URI scheme for '....' '".

Is there any solution could support both develop and release mode?

zjhiphop · 2020-10-22T03:21:03Z

Minimal code change to fix the issue and support for both dev and release mode. Just update getAssetAsString to following will done:

 getAssetAsString = async (asset) => {
        if (!__DEV__) {
            return await FileSystem.readAsStringAsync(asset.uri);
        }

        const downloadedModules = await FileSystem.readDirectoryAsync(FileSystem.cacheDirectory)
        let fileName = 'ExponentAsset-' + asset.hash + '.' + asset.type

        if (!downloadedModules.includes(fileName)) {
            await asset.downloadAsync()
        }

        return await FileSystem.readAsStringAsync(FileSystem.cacheDirectory + fileName)
    }

miansohaibkhalid · 2020-10-22T05:56:30Z

@AnthonyTailer @fattomhk I tried your solution in develop mode, it reported "Failed to fetch scripts or layout. Unsupported URI scheme for '....' '".

Is there any solution could support both develop and release mode?

You should try this one. It's working on both modes:
#104 (comment)

horstleung · 2020-11-03T06:42:15Z

Minimal code change to fix the issue and support for both dev and release mode. Just update getAssetAsString to following will done:

 getAssetAsString = async (asset) => {
        if (!__DEV__) {
            return await FileSystem.readAsStringAsync(asset.uri);
        }

        const downloadedModules = await FileSystem.readDirectoryAsync(FileSystem.cacheDirectory)
        let fileName = 'ExponentAsset-' + asset.hash + '.' + asset.type

        if (!downloadedModules.includes(fileName)) {
            await asset.downloadAsync()
        }

        return await FileSystem.readAsStringAsync(FileSystem.cacheDirectory + fileName)
    }

I faced the problem and tried this fix this week. Thanks for saving my hours.

hardiksonagrav · 2021-06-02T05:41:22Z

I'm getting the same behavior here.
After upgrade my project from RN 0.61.5 to 0.63.3 and using Xcode 12. Works on Debug but not in Release mode.

I have tried the suggestions above. The one that worked was the "guess" comment by @fattomhk.

So I applied this patch with patch-package and set useCDN as false on HC component options:

diff --git a/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js b/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
index fabd55a..c284c26 100755
--- a/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
+++ b/node_modules/@highcharts/highcharts-react-native/src/HighchartsReactNative.js
@@ -74,15 +74,14 @@ export default class HighchartsReactNative extends React.PureComponent {
                 name !== 'highcharts-3d' ?
                 HighchartsModules.modules[name] : HighchartsModules[name]
             )
-            stringifiedScripts[name] = await this.getAssetAsString(script)
+            stringifiedScripts[name] = await FileSystem.readAsStringAsync(script.uri)
         }
     }
 
     setLayout = async () => {
         const indexHtml = Asset.fromModule(require('../highcharts-layout/index.html'))
-
         this.setState({
-            layoutHTML: await this.getAssetAsString(indexHtml)
+            layoutHTML: await FileSystem.readAsStringAsync(indexHtml.uri)
         })
     }

My package.json:

{
  "@highcharts/highcharts-react-native": "^3.1.2",
  "react": "16.13.1",
  "react-native": "0.63.3",
  "react-native-unimodules": "^0.11.0",
  "react-native-webview": "^10.9.2",
}

Working fine.

utsavGridKey · 2024-05-21T04:21:50Z

Hey Falas,
I have tried all the above solution but at the end i have this error and this the issue with highchart react native

Failed to fetch scripts or layout. Calling the 'readAsStringAsync' function has failed
→ Caused by: File '/~assets/ffceb4b4585b380fc666d3882abee7e5' is not readable

Denyllon added the pending reply label Sep 9, 2020

Denyllon added the bug Something isn't working label Oct 7, 2020

This was referenced Oct 7, 2020

Not working in real devices #101

Closed

Charts sometimes fail to render #92

Closed

horstleung mentioned this issue Oct 20, 2020

Chart Not Rendering on iOS and Android #4

Closed

Denyllon mentioned this issue Oct 24, 2020

The chart does not show after packaging #106

Closed

appjitsu mentioned this issue Dec 18, 2020

ios - non-expo - Failed to fetch script or layout - hcsript count not be read #122

Open

yutaro47 mentioned this issue Jun 27, 2021

Chart is not rendering after generating apk file and installed on mobile #130

Open

Denyllon mentioned this issue Nov 24, 2021

Library is being used and our app is live #129

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not rendering in iOS release mode #104

Not rendering in iOS release mode #104

horstleung commented Sep 7, 2020

horstleung commented Sep 8, 2020

Denyllon commented Sep 9, 2020

horstleung commented Sep 10, 2020

Denyllon commented Sep 14, 2020

vinasgo commented Sep 14, 2020

jenniferburch commented Sep 15, 2020

vinasgo commented Sep 15, 2020

Hotfix

horstleung commented Sep 16, 2020

aditya1711 commented Sep 17, 2020

Hotfix

horstleung commented Sep 18, 2020

Hotfix

Denyllon commented Sep 18, 2020

horstleung commented Sep 21, 2020

zjhiphop commented Sep 21, 2020

jenniferburch commented Sep 21, 2020

horstleung commented Sep 22, 2020

jenniferburch commented Sep 23, 2020

Denyllon commented Oct 7, 2020

wzhang2 commented Oct 7, 2020 •

edited

Loading

Denyllon commented Oct 7, 2020 •

edited

Loading

AnthonyTailer commented Oct 14, 2020

zjhiphop commented Oct 21, 2020

zjhiphop commented Oct 22, 2020

miansohaibkhalid commented Oct 22, 2020

horstleung commented Nov 3, 2020

hardiksonagrav commented Jun 2, 2021

utsavGridKey commented May 21, 2024 •

edited

Loading

Not rendering in iOS release mode #104

Not rendering in iOS release mode #104

Comments

horstleung commented Sep 7, 2020

horstleung commented Sep 8, 2020

Hotfix

Denyllon commented Sep 9, 2020

horstleung commented Sep 10, 2020

Denyllon commented Sep 14, 2020

vinasgo commented Sep 14, 2020

jenniferburch commented Sep 15, 2020

vinasgo commented Sep 15, 2020

Hotfix

horstleung commented Sep 16, 2020

aditya1711 commented Sep 17, 2020

Hotfix

horstleung commented Sep 18, 2020

Hotfix

Denyllon commented Sep 18, 2020

horstleung commented Sep 21, 2020

zjhiphop commented Sep 21, 2020

jenniferburch commented Sep 21, 2020

horstleung commented Sep 22, 2020

jenniferburch commented Sep 23, 2020

Denyllon commented Oct 7, 2020

wzhang2 commented Oct 7, 2020 • edited Loading

Denyllon commented Oct 7, 2020 • edited Loading

AnthonyTailer commented Oct 14, 2020

zjhiphop commented Oct 21, 2020

zjhiphop commented Oct 22, 2020

miansohaibkhalid commented Oct 22, 2020

horstleung commented Nov 3, 2020

hardiksonagrav commented Jun 2, 2021

utsavGridKey commented May 21, 2024 • edited Loading

wzhang2 commented Oct 7, 2020 •

edited

Loading

Denyllon commented Oct 7, 2020 •

edited

Loading

utsavGridKey commented May 21, 2024 •

edited

Loading