React.js中嵌入HTML文件报错：未配置对应文件类型loader的问题求助

嘿，我来帮你搞定这个问题！你遇到的错误是因为React项目默认使用的Webpack打包工具不知道该怎么处理.html文件，得给它配个合适的loader来解析才行。下面给你几种实用的解决方案：

方案一：用raw-loader读取HTML字符串 #

这个loader会把HTML文件转换成字符串，之后我们可以把字符串转成Blob URL给embed标签用：

1. 先安装raw-loader：

   npm install raw-loader --save-dev
   # 或者用yarn
   yarn add raw-loader -D
   

2. 修改你的组件代码，把HTML字符串转成可访问的URL：

   import React, { useMemo } from 'react';
   import htmlFile from './htmlFile.html';
   
   function Render(){
     // 把HTML字符串转成Blob URL，避免每次渲染都重复创建
     const htmlUrl = useMemo(() => {
       const blob = new Blob([htmlFile], { type: 'text/html' });
       return URL.createObjectURL(blob);
     }, [htmlFile]);
   
     return (
       <embed src={htmlUrl} />
     )
   }
   
   export default Render;
   

3. （可选）如果直接导入报错，你可以在导入时显式指定loader：

   import htmlFile from 'raw-loader!./htmlFile.html';
   

   或者在Webpack配置文件里添加规则（如果是Create React App项目，可能需要先eject或者用craco来修改配置）：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.html$/i,
           use: 'raw-loader',
         },
       ],
     },
   };
   

方案二：使用html-loader处理HTML #

html-loader会解析HTML中的资源引用（比如图片、CSS），适合更复杂的HTML文件：

1. 安装html-loader：

   npm install html-loader --save-dev
   # 或者yarn
   yarn add html-loader -D
   

2. 配置Webpack规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.html$/i,
           loader: 'html-loader',
         },
       ],
     },
   };
   

3. 组件代码和方案一一样，把导入的HTML字符串转成Blob URL即可。

方案三：用iframe代替embed（最简单的方式） #

如果你的HTML文件不需要和React代码有太多交互，直接把它放到项目的public文件夹里，然后用iframe引用会更省事，完全不需要配置loader：

import React from 'react';

function Render(){
  return (
    <iframe src="/htmlFile.html" title="Embedded HTML" width="100%" height="600" />
  )
}

export default Render;

public文件夹里的文件会被直接复制到打包后的目录，浏览器可以直接通过相对路径访问。

内容的提问来源于stack exchange，提问作者Mauj Mishra