how to import HTML file into React component and use it as a component?

Question

I want to import an HTML file into a React component

peft.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

index.js

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;

so in my case, I need to import a local HTML file and use it in but I'm getting the error:

Uncaught (in promise) Error: Module parse failed: C:\Users....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.

any ideas? How to load an HTML file inside of a React Component? How to add an appropriate loader to handle this file type? Anything?

I find this solution as most logical:

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

but I can not apply it because I'm getting an error:

Uncaught (in promise) Error: Module parse failed: C:\Users\....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html xmlns="w3.org/1999/xhtml">; 
| <head><title>

Look at: https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component — Lumpenstein, Jun 11 '18 at 08:05
Why not make it `peft.js` instead of `.html` extension? Is there any reason?. You can also use this "const component(){ return(
hello World
)}" — Deee, Jun 11 '18 at 08:13

score 15 · Accepted Answer · answered Jun 11 '18 at 09:48

15

You can import or require the html file and use it in the src attribute,

var perf =require('./template.html');

class Index extends React.Component {
   render(){
      return (
         <iframe src={perf }></iframe>   /* like this */
      );
   }
}
export default Index;

answered Jun 11 '18 at 09:48

Rohith Murali

5,551
2
25
26

But where are you using `IndexedDB` ?? – Rohith Murali Jun 12 '18 at 10:41
3

I am curious to know the answer for this problem. I am running into the same error as mentioned in the post. The answer given above " " didn't solve my problem. – user3362908 Jan 15 '19 at 00:17
Did you try `
` – Rohith Murali Jan 15 '19 at 05:06
9

u still get Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > | | – user4920718 Jun 01 '20 at 18:09
Works fine with `Create React App`, see https://github.com/facebook/create-react-app – Manohar Reddy Poreddy Sep 09 '22 at 02:11

score 9 · Answer 2 · answered Sep 09 '22 at 03:49

Spent 2 hours on this.

Two ways to do the same below:

Method1 - iframe (part of page) goes to that html file (chap3.htm)
Method2 - fetch the contents of chap3.htm and set to state, state is added with dangerouslySetInnerHTML

NOTE

Html file is in public directory (myapp\public\chap3.htm).
May work from current directory too, but does not look like as a usual way to load static resource/html from current directory.

Method 1

import React from'react';
import'./App.css';

function App() {
  return(
    <div className="App">
      <iframe src="chap3.htm"></iframe>
    </div>
  );
}

export default App;

Method 2

import React, { useEffect, useState }from'react';
import'./App.css';

function App() {
  let[htmlFileString, setHtmlFileString] = useState();

  async function fetchHtml() {
    setHtmlFileString(await (await fetch(`chap3.htm`)).text());
  }
  useEffect(() => {
    fetchHtml();
  }, []);

  return(
    <div className="App">
      <div dangerouslySetInnerHTML={{ __html: htmlFileString }}></div>
    </div>
  );
}

export default App;

how to import HTML file into React component and use it as a component?

2 Answers2

Linked