I'm trying to import a HTML file (.html) into react js - typescript (.tsx) as a ponent
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
| |
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>
);
}
}
I'm trying to import a HTML file (.html) into react js - typescript (.tsx) as a ponent
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/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>
);
}
}
Share Improve this question asked Dec 12, 2021 at 17:09 Roqaia AlrfouRoqaia Alrfou 1014 silver badges15 bronze badges 2- The correct way to do this is to convert your html file into jsx syntax and insert directly inside <li> tag – movila Commented Dec 12, 2021 at 17:50
- @movila that's too hard, because the HTML file is too large – Roqaia Alrfou Commented Dec 12, 2021 at 18:00
2 Answers
Reset to default 51. add code to string variable
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>`
2. rename file to typescript
rename your facebook.html into facebook.ts
3. import html code as stringified code
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;
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744929465a4601644.html
评论列表（0条）