模块解析失败：意外标记 (1:0) 您可能需要适当的加载程序来处理此文件类型。

Question

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

Answer 1

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.