import html file in react-typescript-CodePudding

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>            
    );
}

}

CodePudding user response：

1. 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>            
    );
}

CodePudding user response：

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;