HtmlWebpackPlugin – ERROR in Error: The loader "[…]/html-webpack-plugin – /lib/loader.js!/[…]/src/index.html" didn't return html

I’m trying to load an HTML template using HtmlWebpackPlugin and it seems not working. If I try to load the plugin without arguments it works. Any ideas?

The index.html file that I’m trying to load is in the right place, just to consider

package.json:

{
 ...
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@storybook/html": "^5.2.8",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^3.2.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0"
  }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /.(ts|tsx)?$/,
        loader: 'ts-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: [/node_modules/]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  devServer: {
    hot: true,
    host: '0.0.0.0'
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.scss', '.css']
  }
};

3 thoughts on “HtmlWebpackPlugin – ERROR in Error: The loader "[…]/html-webpack-plugin – /lib/loader.js!/[…]/src/index.html" didn't return html”

  1. from html-webpack-plugin documentation

    Don’t set any loader

    By default (if you don’t specify any loader in any way) a fallback
    lodash loader kicks in.

    {
      plugins: [
        new HtmlWebpackPlugin({
          template: 'src/index.html'
        })
      ]
    }
    

    Be aware, using .html as your template extention may unexpectedly
    trigger another loader.

    please follow the documentation first and see whether you have any loader conflicts.

    Reply
  2. For me, the solution was to make sure everything was updated.

    I’m on Webpack 5, and everything except html-webpack-plugin was up to date. I updated html-webpack-plugin from v4 to v5, and the issue went away.

    Reply

Leave a Comment