You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file, when importing html file

Viewed 678

I am using React.js. I want to embed an html file to show into the browser. First I import the html file. But when using the html file into embed tag. It throws and error saying "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Here is the code -

import React from 'react';
import htmlFile from './htmlFile.html';

function Render(){
  return (
    <embed src = {htmlFile}>
    </embed>
  )
}

export default Render;

Here is the screenshot of the error -

enter image description here

Please help me solve this problem.

1 Answers

In a case, you can use "html-loader". to get start, install it first:

npm install --save-dev html-loader

After importing you HTML:

import htmlFile from './htmlFile.html';

You need some configs in webpack.js:

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

For more information refer to: html-loader

Related