When I try to import an HTML file into React, I get an error

Question

I saw one beautiful star animation in codesandbox link I want to apply it in my project, for this I created a separate HTML file and put the code from the link. Now i am trying to render html file in my jsx

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

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

But I am getting this kind of error

What is it connected with? How can I solve this problem?

Answer 1

It looks like you are trying to import an HTML file into your JavaScript code, but the JavaScript module system doesn't know how to handle HTML files.

One solution is to use an HTML loader to handle the import of the HTML file. In your webpack configuration, you can add a rule that tells webpack to use the HTML loader for HTML files.

Here's an example of how you might do this:

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

Hopefully that helps!