Included partial in Webpack 4 rendering as literal text instead of HTML

Question

I'm trying to include a header.html in my index.html, as a partial via html-loader but header.html is rendering as literal text instead of HTML. Using interpolate as mentioned here and here seems applicable to Webpack v2. I also noticed that the #interpolate hash in html-loader URL is not working; meaning interpolate is defunct as of Webpack v4? Webpack emits an error about an Invalid options object if I include options: { interpolate: true }

Tree

--dist
--node_modules
--src
----js
------index.js
----partials
------header.html
--templates
----index.html
--package.json
--webpack.config.json

webpack.config.json

const path                  = require("path"),
    webpack                 = require('webpack'),
    { CleanWebpackPlugin }  = require("clean-webpack-plugin"),
    HtmlWebpackPlugin       = require("html-webpack-plugin");

module.exports = {
   mode: "development",
   entry: {
       index: "./src/js/index.js"
   },
   plugins: [
       // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
       new CleanWebpackPlugin(),
       new HtmlWebpackPlugin({
           title: "Home",
           filename: "index.html",
           template: "templates/index.html",
           inject: true,
           minify: true
       })
   ],
   devtool: "source-map",
   devServer: {
       contentBase: "./dist"
   },
   output: {
       // filename: "[name].bundle.js",
       filename: "[name].[contenthash].js",
       path: path.resolve(__dirname, "dist"),
       // publicPath: "/"
   },
   optimization: {
       moduleIds: "hashed",
       runtimeChunk: "single",
       splitChunks: {
           cacheGroups: {
               vendor: {
                   test: /[\\/]node_modules[\\/]/,
                   name: "vendors",
                   chunks: "all",
               }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.(html)$/,
                loader: "html-loader",
                options: {
                   minimize: true
                }
            }
        ]
    }
}

index.html

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <%= require("html-loader!./src/partials/header.html") %>
    </body>
</html>

Edit 1

So I figured that interpolate doesn't work in v1.0.0 of html-loader basis this answer

My next question would be what alternatives do I have in place of interpolate in v1.0.0?

@IVOGELOV I ended up downgrading to v0.5.5. The partial is pulling but somehow webpack injects `module.exports = "
...
"` I don't know why — Tafadzwa Gonera, Apr 29 '20 at 07:15
@connexo `<%= require("html-loader!../partials/_header.html") %>` — Tafadzwa Gonera, Apr 29 '20 at 12:07
I've never seen this syntax `<%= ... %>`. That is neither a valie HTML comment, nor a valid tag, nor anything valid by the looks of it. — connexo, Apr 29 '20 at 14:26
@connexo I'm certain `<%= ... %>` are valid templating tags. We've a live site running on Webpack v2 using `html-loader` v0.5.5 and `html-webpack-plugin` v3.2.0 — Tafadzwa Gonera, Apr 30 '20 at 07:41

score 0 · Accepted Answer · answered May 03 '20 at 08:59

I downgraded html-loader to v0.5.5 because interpolate option wasn't working with html-loader v1.0.0. Also, I changed index.html to

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <%= require("html-loader!../src/partials/header.ejs") %>
    </body>
</html>

The path in the initial <%= require(...) %> was wrong. I wonder if that was typo. I also changed the partial from a .html to .ejs (The implementation that's live had partials in the .html format for html-webpack-plugin v3.2.0, which I downgraded to but still didn't work. I've no clue why it didn't work)

I also took the liberty to upgrate html-loader to v1.1.0 as suggested by @IVO GELOV so that my package.json looked like this:

 "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "csv-loader": "^3.0.3",
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3",
    "xml-loader": "^1.2.1"
},

And, interpolate worked. Not sure what's wrong with html-loader v1.0.0

Included partial in Webpack 4 rendering as literal text instead of HTML

1 Answers1