React组件导入静态HTML报Module parse failed错误如何解决

这个报错是项目构建工具无法识别.html后缀导入文件导致的：默认配置下构建工具只会按照JS/JSX语法解析被import引入的文件，碰到HTML文件开头的<!DOCTYPE html>标签时，无法按JS语法规则解析，就会抛出需要对应loader处理文件类型的错误。

根据项目使用的构建工具和需求，选对应方案即可：

方案1：直接导入HTML文件 #

• 如果是Vite搭建的项目：不需要额外安装依赖，导入HTML文件时加?raw后缀，就能直接把HTML内容作为字符串导入，原有组件其他逻辑不用改：

import Page from './about.html?raw';

• 如果是Webpack搭建的项目（包括原生Webpack配置、Create React App搭建的项目）：需要添加html-loader处理HTML文件
  1. 安装开发依赖

  npm install html-loader --save-dev
  

  2. 在构建配置的module.rules数组中添加HTML处理规则：

  {
    test: /\.html$/i,
    loader: 'html-loader',
    options: {
      // 不需要解析HTML内部的图片、链接等静态资源引用时，设为false可以减少不必要的解析开销
      sources: false
    }
  }
  

  如果是未eject的Create React App项目，可以通过craco、react-app-rewired这类工具注入上述webpack规则，不想改构建配置可以直接用方案2。

配置完成后重启开发服务，原有组件的导入和渲染逻辑就能正常运行。

方案2：零构建配置修改方案 #

不想调整构建规则的话，可以直接用静态资源托管+动态拉取的方式实现：

1. 把所有需要引入的静态HTML文件放到项目的public静态资源目录下，比如存放路径为public/static/about.html
2. 调整组件代码，在组件挂载后拉取HTML内容再渲染：

import React, { Component } from 'react';

export default class MyComponent extends Component {
  constructor(props){
    super(props);
    this.state = {
      pageContent: ''
    }
  }

  componentDidMount() {
    // 路径对应public目录下的文件相对路径，打包后会自动匹配静态资源部署路径
    fetch('/static/about.html')
      .then(res => res.text())
      .then(htmlText => {
        this.setState({ pageContent: htmlText })
      })
  }

  render(){
     return (<div dangerouslySetInnerHTML={{__html: this.state.pageContent}} />)
  }
}

后续需要新增其他静态HTML页面时，只要把文件放到public对应目录，调整fetch的请求路径即可，不需要修改任何构建配置。

注意：没有配置对应解析规则时，不要把静态HTML放在src目录下用import语法导入，必然会触发解析错误。

内容的提问来源于stack exchange，提问作者Mr X