How to render complete HTML page inside a div in react-CodePudding

I am trying to load a HTML file inside a div in react component, but my web-pack is not supporting it, i have also add html-loader inside my web-pack rules but it's still not supporting it can you tell me what am i done wrong.

This my react component

import './App.css';
import HTMLFILE from './Get_Started_With_Smallpdf.html'
// var htmlDoc = {__html: HTMLFILE};
import DOMPurify from 'isomorphic-dompurify';


function App() {
  

  return (
    <div className="App">
      <div dangerouslySetInnerHTML={{

      __html: DOMPurify.sanitize(HTMLFILE)

      }}/>
    </div>
  );
}

export default App;

This is my webpack file

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: '/src/index.js',
  output: { path: path.resolve(__dirname, "dist")},
  module: {
        rules: [
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: [':data-src']
                    }
                }
            },
            {
                test: /\.ts(x)?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/env',
                                {
                                    useBuiltIns: 'usage',
                                    targets: '>0.25%,not dead',
                                    corejs: '3',
                                },
                            ],
                            ['@babel/preset-react'],
                            ['@babel/react'],
                            [
                                '@babel/typescript',
                                {
                                    isTSX: true,
                                    allExtensions: true,
                                },
                            ],
                        ],
                        plugins: ['@babel/plugin-transform-runtime'],
                    },
                },
            },
            {
                test: /\.(js|es|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: { presets: ['@babel/env','@babel/preset-react'] },
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.art$/,
                use: [
                    {
                        loader: path.join(__dirname, './helper/fix-template-loader.js'),
                    },
                    {
                        loader: 'art-template-loader',
                        options: {
                            escape: false
                        },
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ],
            }
        ]
    },
    plugins: [new MiniCssExtractPlugin({filename: '[name].css'})],
    externals: ['UIExtension', 'PDFViewCtrl'],
    resolve: {
        extensions: ['.ts', '.tsx', '.js', 'jsx'],
        alias: {
            'assets': path.resolve(__dirname, './public/assets'),
        },
    },
};

And this is my HTML file that i'm trying to load

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<style>
.page { background-color:white; position:relative; z-index:0; }
.vector { position:absolute; z-index:1; }
.image { position:absolute; z-index:2; }
.text { position:absolute; z-index:3; opacity:inherit; white-space:nowrap; }
.annotation { position:absolute; z-index:5; }
.control { position:absolute; z-index:10; }
.annotation2 { position:absolute; z-index:7; }
.dummyimg { vertical-align: top; border: none; }

</style>
</head>
<body style="background-color:#999999;color:#000000;">
<div id="canvas" align="center">

<!-- page 1 begin -->
<div  style="width:1024.0px;height:1448.2px;">
<div  style="cursor:pointer;left:837.4px;top:341.1px;width:93.0px;height:30.3px;" title="" onclick="document.location='';"><img  width="93" height="30" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw==" /></div>
<div  style="cursor:pointer;left:497.5px;top:375.5px;width:66.3px;height:30.3px;" title="" onclick="document.location='';"><img  width="66" height="30" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw==" /></div>
<div  style="cursor:pointer;left:685.1px;top:936.4px;width:208.4px;height:30.3px;" title="" onclick="document.location='';"><img  width="208" height="30" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw==" /></div>
<div  style="cursor:pointer;left:390.4px;top:1269.4px;width:167.5px;height:30.3px;"  onclick="document.location='';"><img  width="167" height="30" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw==" /></div>
<div  style="cursor:pointer;left:92.2px;top:1303.8px;width:39.8px;height:30.3px;" title="" onclick="document.location='';"><img  width="40" height="30" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw==" /></div>

<span style="color:#1A1A1A;font-size:38px;font-family:'Times';font-weight:bold;">
<span  style="left:337.0px;top:52.5px;">Welcome to Smallpdf</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';font-weight:bold;">
<span  style="left:497.5px;top:230.0px;">Digital Documents&#8212;All In One Place</span>
<span  style="left:497.5px;top:825.4px;">Access Files Anytime, Anywhere</span>
<span  style="left:81.9px;top:546.6px;">Enhance Documents in One Click</span>
<span  style="left:92.2px;top:1158.4px;">Collaborate With Others</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:497.5px;top:271.5px;">With the new Smallpdf experience, you can</span>
<span  style="left:497.5px;top:305.9px;">freely upload, organize, and share digital</span>
<span  style="left:497.5px;top:340.3px;">documents. When you enable the</span>
</span>
<span style="color:#0054FF;font-size:24px;font-family:'Times';">
<span  style="left:837.4px;top:340.3px;">&#8216;Storage&#8217;</span>
<span  style="left:497.5px;top:374.7px;">option</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:563.8px;top:374.7px;">, we&#8217;ll also store all processed files here.</span>
<span  style="left:497.5px;top:866.8px;">You can access files stored on Smallpdf from</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:497.5px;top:901.3px;">your computer, phone, or tablet. We&#8217;ll also</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:497.5px;top:935.7px;">sync files from the</span>
</span>
<span style="color:#0054FF;font-size:24px;font-family:'Times';">
<span  style="left:671.7px;top:935.7px;">Smallpdf Mobile App</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:884.9px;top:935.7px;">to our</span>
<span  style="left:497.5px;top:970.1px;">online portal</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:81.9px;top:588.1px;">When you right-click on a file, we&#8217;ll present</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:81.9px;top:622.5px;">you with an array of options to convert,</span>
<span  style="left:81.9px;top:656.9px;">compress, or modify it.</span>
<span  style="left:92.2px;top:1199.9px;">Forget mundane administrative tasks. With</span>
<span  style="left:92.2px;top:1234.3px;">Smallpdf, you can request e-signatures, send</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:92.2px;top:1268.8px;">large files, or even enable the</span>
</span>
<span style="color:#0054FF;font-size:24px;font-family:'Times';">
<span  style="left:377.0px;top:1268.8px;">Smallpdf G Suite</span>
<span  style="left:92.2px;top:1303.2px;">App</span>
</span>
<span style="color:#1A1A1A;font-size:24px;font-family:'Times';">
<span  style="left:136.9px;top:1303.2px;">for your entire organization.</span>
</span>
<span style="color:#757575;font-size:28px;font-family:'Times';">
<span  style="left:193.4px;top:107.3px;">Ready to take document management to the next level?</span>
</span>
<div  style="left:1.0px;top:215.0px;"><img width="1023" height="1233" src="data:image/webp;base64,UklGRlhtAABXRUJQVlA4WAoAAAAQAAAA/gMA0AQAQUxQSHMoAAABHMVt2zjh"/></div>

</div>
<!-- page 1 end -->
<p></p>


</div>
</body>
</html>

I have tried to change my web-pack rules with different options but it's still not going through. Some insight will be much appreciated.

This is the error i'm getting

Module parse failed: Unexpected token (1:1)
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
> <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml">
| <head>

webpack compiled with 1 error

CodePudding user response：

Try something like this, link straight to the html file

<iframe src="(your directory here)" scrolling="no" id="iframe_lp" style="min-width: 100%; visibility: visible;" width="1px" frameborder="0"></iframe>

CodePudding user response：

You can do it like this Or You can use iframe

const App = () => {
  const data = 'lorem <b>ipsum</b>';

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;