cannot load html from webpack loader in reactjs

Question

I'm very new to reactjs and webpack. I want to load html file to reactjs via using I use html-loader and webpack, but got this error

Failed to compile.

./src/test_ts.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html>
| <body>

This is my webpack config

var path = require("path");
var webpack = require("webpack");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");

module.exports = {
  entry: "./src/header.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "app.bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "html"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  },
  stats: {
    colors: true
  },
  devtool: "source-map"
};

and this is where I want to load

import React from "react";
import { Button } from "reactstrap";
var htmlContent = require("./test_ts.html");

class Header extends React.Component {
  render() {
    return <div></div>;
  }
}

export default Header;

I try to follow many tutorial but can't resolve this, what may I do wrong?

Have you tried putting something simple in your html file, like e.g. `
testing
`? — Tholle, Jul 11 '18 at 09:09
@Tholle It's doesn't work, still got the same error with just 1 line of code like your suggest — Uny, Jul 12 '18 at 02:02
@HarishSoni I try using webpack-plugin follow basic usage from https://webpack.js.org/plugins/html-webpack-plugin/ and still got same error. — Uny, Jul 12 '18 at 02:07
Did you manage to fix it? I'm facing the same problem and I can't solve it. Thanks — Alex Serra, Apr 19 '21 at 09:36

score 0 · Answer 1 · answered Apr 30 '19 at 20:34

0

Add the following rule to your webpack.config file:

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Before that install html-loader using command: npm i -D html-loader :

answered Apr 30 '19 at 20:34

Ram Budha

180
1
11

cannot load html from webpack loader in reactjs

1 Answers1