Importing an HTML file to a React's component

Question

and 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>

If you look at the question you linked, you'll see to able to load HTML like this you need an appropriate loader. What it means is that require directive is not understood by the browser, and you need some tool that changes that require into the appropriate html import tag... Are you using webpack or some other bundler? — Fabio Lolli, Jun 11 '18 at 09:36
Also, on a separate note, are you really sure you need to import HTML for a React component? I usually consider it a bad pattern, and it can be worked around in most use cases... Most, not all :) — Fabio Lolli, Jun 11 '18 at 09:39
yes. I'm using webpack! Well, I was asked by my mentor to do this so I'm trying to make it happen. Looks possible. — Zack Zilic, Jun 11 '18 at 09:40
Alright, if you're using webpack then @nrgwsth answer should have it covered — Fabio Lolli, Jun 11 '18 at 09:42

score 2 · Answer 1 · edited Jan 09 '20 at 06:41

2

Use html-loader to import raw html in your code,

in your webpack config

{
      test: /\.(html)$/,
      use: {
        loader: 'html-loader'
      }
}

edited Jan 09 '20 at 06:41

jbyun94

25
6

answered Jun 11 '18 at 09:36

Anurag Awasthi

6,115
2
18
32

Importing an HTML file to a React's component

1 Answers1