I'm trying to import a HTML file (.html) into react js - typescript (.tsx) as a component
but it gives me this ERROR:
error - ./pages/SM_login/Facebook.html 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
| |
Here is my code:
const facebook = require('./SM_login/facebook.html');
export default class CustomDocument extends Document {
render() {
return (
<div>
<li>
<iframe src={facebook }></iframe>
</li>
</div>
);
}
}
Inside your ./SM_login/facebook.html file, wrap all the code inside a backticks (``) and name this string with a variable name such as iframeCode
export default iframeCode = `<html>...</html>`
rename your facebook.html into facebook.ts
inside your code do following with dangerouslySetInnerHTML
import facebook from './SM_login/facebook.ts'
export default class CustomDocument extends Document {
render() {
return (
<div>
<li>
<div dangerouslySetInnerHTML={{__html: facebook}} />
</li>
</div>
);
}
According to react documentation you can't import a module using require keyword you have to use es6 keyword import your code should be like this
import facebook from "./facebook.html";
const CustomDocument = () => {
return (
<div>
<li>
<iframe src={facebook}></iframe>
</li>
</div>
);
}
export default CustomDocument;