Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. <!DOCTYPE html>

user_15663424 0
Viewed 445

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.

enter image description here

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} />)
}}
react-native webpack reactjs javascript
1 Answers

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.

user_190690370
Related