I have tried to display my pyLDAvis results in iframe in React. It works well in the internet but when there is no internet, the display is not seen. I have tried to call d3 locally in public/index.html as shown from the https://d3js.org/getting-started#installing-from-npm but I realised the issue is due to ldavis.v3.0.0.js itself. More screenshots below.

Backend code to run the pyLDAvis and saving the results in HTML file

pyLDAvis.save_html(p, output_folder + 'tm_visualisation.html')

.....
data['lda_results'] = {
        'num_topics': int(best_num_topics),
        'lda_wordcloud': lda_helper.image_to_data_url(os.path.join(output_folder, 'wordcloud.png')),
        'lda_pyLDAviz': lda_helper.file_to_base64(os.path.join(output_folder, 'tm_visualisation.html')), #save a visualization to a standalone html file
        'lda_results_json': output_df.to_json(orient="records")
    }

.....

Frontend React code to display the pyLDAvis in iframe

import styles from './index.module.css';
import { Radio } from 'antd';
import DynamicTable from '../DynamicTable';
import * as d3 from 'd3';
interface ResultsDisplayProps {
    results: any;
  
  useEffect(()=>{
    if(showDownload && showLDAvis){
      const decodedHtml = atob(results["lda_pyLDAviz"]);
      const blob = new Blob([decodedHtml], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      d3.select("iframe").attr("src", url);
      return () => {
        URL.revokeObjectURL(url);
      };
    }
  }, [results, showDownload, showLDAvis]);


.....


else if (showLDAvis){
      resultPanel = (
        <div className={styles.pyLDAviz}>
          <iframe width="175%" height="800px" title='visualisation results'></iframe>
        </div>
      )
    }


...

Expected outcome

Actual outcome(without internet)

Error observed from inspect console

Error from LDAvis_load_lib