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>

Why not make it peft.js instead of .html extension? Is there any reason?. You can also use this "const component(){ return(<div>hello World</div>)}" — Deee
– Deee, Commented Jun 11, 2018 at 8:13

Rohith Murali · Accepted Answer · 2018-06-11 09:48:52Z

17

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, 2018 at 9:48

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rohith Murali Over a year ago

But where are you using IndexedDB ??

user3362908 Over a year ago

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 "<iframe src={perf }></iframe> " didn't solve my problem.

Rohith Murali Over a year ago

Did you try <div dangerouslySetInnerHTML={{ __html: htmlText }} ></div>

Achu EL Somto Over a year ago

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 webpack.js.org/concepts#loaders > <!DOCTYPE html> | <html lang="en"> | <head>

Manohar Reddy Poreddy Over a year ago

Works fine with Create React App, see github.com/facebook/create-react-app

Manohar Reddy Poreddy · Accepted Answer · 2022-09-09 03:49:13Z

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;

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related