No way to load JS files

See original GitHub issue

Bug description: Im creating port of AmCharts for react-native using @rn-community/rn-webview to render webview and show charts in it. Facing error when Im trying to load main amcharts.js file in injected js code:

Error: 'src/components/AmCharts/amcharts-files/amcharts.js' cannot be loaded as its extension is not registered in assetExts

To Reproduce:

const runFirst = `
    function loadScripts(file, callback) {
      var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {       
          var amcScript = document.createElement('script');
          amcScript.innerHTML = this.responseText;
          document.body.appendChild(amcScript);

          if (callback) {
            callback.call();
          }
        }
      };

      xhttp.open("GET", '${scriptsPath}' + file + '.js', true);
      xhttp.send();
    }
    
    loadScripts('amcharts', () => alert('ok'));
    `;

<WebView
          source={amchartsLayout}
          originWhitelist={['*']}

          injectedJavaScript={runFirst}
          mixedContentMode="always"
          allowFileAccessFromFileURLs
          automaticallyAdjustContentInsets
          allowFileAccess
          javaScriptEnabled
          domStorageEnabled
          useWebKit
/>

Expected behavior: Js would be loaded properly without any errors.

Investigation: Guys had same problems when they trying to use highcarts-react-native lib with this @rn-community/rn-webview package: https://github.com/highcharts/highcharts-react-native/issues/4 https://github.com/highcharts/highcharts-react-native/issues/8

Environment:

  • OS: macos, iOS
  • OS version: iOS 13
  • react-native version: 0.61
  • react-native-webview version: 8.0.5

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ugar0ffcommented, Mar 20, 2022

This is still an issue. Any solution?

1reaction
dragercommented, Jun 8, 2020

@Titozzz @jamonholmgren Why is this being closed? The issue isn’t resolved…

Read more comments on GitHub >

github_iconTop Results From Across the Web

why would my javascript file not be loading? - Stack Overflow
Ensure that the file actually exists. If you "view source", from the browser, you can hilite then ...
Read more >
No way to load JS files · Issue #1178 · react-native-webview ...
Bug description: Im creating port of AmCharts for react-native using @rn-community/rn-webview to render webview and show charts in it.
Read more >
How to dynamically load a JS file in JavaScript - Educative.io
Create a script element. Set the src , async , and type attributes. Append the script element to the body. Check if the...
Read more >
1. Loading and Execution - High Performance JavaScript [Book]
The first JavaScript file begins to download and blocks any of the other files from downloading in the meantime. Further, there is a...
Read more >
How to Load a JavaScript File in Browser and Run it Later
In this video, you will learn how you can load a JavaScript file when the page loads but defer the execution of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found