React import html - Module parse failed: You may need an appropriate loader to handle this file type

Question

I want to import a html file and convert into json.

const DocHtml = require('../../Shared/assests/index.html');
const template = { __html: DocHtml };

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      },
    ],
  },
};

But it raise an error saying...

./src/User/Shared/assests/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| <html xmlns="http://www.w3.org/1999/xhtml">
| <head>

I'm facing the same error. Did you manage to resolve it? Thanks! — Alex Serra, Apr 19 '21 at 09:26

score 1 · Answer 1 · answered Apr 20 '21 at 10:54

After lots of research I figured it out.

// Add this to react node-module webpack.config.js file
module.exports = {
  module: {
    loaders: [
      { 
        test: /\.html$/,
        exclude: /node_modules/,
        include: /src/User/Shared/ + /assests/,
        loader: 'html-loader'
      }
    ],
  },
};

React import html - Module parse failed: You may need an appropriate loader to handle this file type

1 Answers1