當我嘗試將 HTML 文件導入 React 時，出現錯誤

Question

我在 codesandbox 鏈接中看到了一顆美麗的星星 animation 我想將它應用到我的項目中，為此我創建了一個單獨的 HTML 文件並將代碼從鏈接中放入。 現在我正在嘗試在我的jsx中渲染html文件

import htmlFile from 'Assets/Styles/Test.html';

function Page () {
   return <iframe src={htmlFile}></iframe>
}

但是我遇到了這種錯誤

它與什么有關？ 我怎么解決這個問題？

Answer 1

看起來您正在嘗試將 HTML 文件導入到您的 JavaScript 代碼中，但是 JavaScript 模塊系統不知道如何處理 HTML 文件。

一種解決方案是使用 HTML 加載程序來處理 HTML 文件的導入。 在您的 webpack 配置中，您可以添加一條規則，告訴 webpack 將 HTML 加載程序用於 HTML 文件。

這是您如何執行此操作的示例：

module: {
  rules: [
    {
      test: /\.html$/,
      use: 'html-loader'
    }
  ]
}

希望這有幫助！