Search code examples
javascripthtmlreactjstypescriptreact-typescript

import html file in react-typescript

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

}

Solution

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