0
283
ViewsModule parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. <!DOCTYPE html>
I am trying to import a static about.html page inside a react component but getting this error. I want to import multiple static HTML pages.
This is my component
import React, { Component } from 'react';
import Page from './about.html';
var htmlDoc = {__html: Page};
export default class MyComponent extends Component {
constructor(props){
super(props);
}
render(){
return (<div dangerouslySetInnerHTML={htmlDoc} />)
}}
·
Juan Pablo Isaza
1 answers
Answer question0
If you want to include static html in ReactJS. You need to use html-loader plugin if you are using webpack to serve your react code.
First of all you need to install html-loader plugin. Open your terminal and run following command:
npm install --save-dev html-loader Then open your webpack configuration file and add following code:
{
modules: {
loaders: [
{ test: /\.html$/, loader: 'html-loader' }
]
}
}
Now, in your react code do following changes:
var htmlContent = require('path/to/html/file.html');
export default function MyComponent() {
return (
<div dangerouslySetInnerHTML={ {__html: htmlContent} } />
);
}
That is it. Now you may use static html files to load your html files in react.
·
Juan Pablo Isaza
Report
Answer question