Tags:  htmlreactjs
Source:  Twitter logo

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>

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;
10 users liked answer #0dislike answer #010
Rohith Murali profile pic
Rohith Murali

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).