I am trying to get the content of an HTML file into a React component, here is the HTML (it is written automatically by a python script that's why I can't just copy/paste it):
<div class="bionic-reader bionic-reader-28ed7a3f-858a-42ce-b179-f51492043780 origin " style="" >
<div class="bionic-reader-content">
<div class="bionic-reader-container">
<b class="b bionic">thi</b>s <b class="b bionic">i</b>s a <b class="b bionic">bi</b>g <b class="b bionic">tes</b>t <b class="b bionic">o</b>f <b class="b bionic">senten</b>ce
<!-- <div class="br-foot-node">
<p style="margin: 32px 0 32px 70px; font-weight: 700; font-size: 26px; line-height: 1.6em;">
—
</p>
<p>
Bionic Reading<sup>®</sup><br>
A higher dimension of reading.<br>
<a href="https://bionic-reading.com">bionic-reading.com</a>
</p>
<br/>
<br/>
<p>
</p>
</div> -->
</div>
</div>
</div>
And here is the React component I wanted to put the HTML into, here I tried a method using dangerouslySetInnerHTML, but it is showing me the following error:
import React from 'react'
import htmlContent from './htmlContent.html';
export default function Home() {
return (
<div dangerouslySetInnerHTML={ {__html: htmlContent} } />
)};
Compiled with problems:X
ERROR in ./src/htmlContent.html 1:0
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
> <div class="bionic-reader bionic-reader-28ed7a3f-858a-42ce-b179-f51492043780 origin " style="" >
| <div class="bionic-reader-content">
| <div class="bionic-reader-container">