Html Webpack Plugin renders JS module instead of HTML file

Question

I'm trying to use an EJS loader and the Html Webpack Plugin to compile and output an HTML file but it keeps rendering a file like this:

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

Here's my webpack config:

module.exports = {
  target: 'node',
  entry: './src/server.tsx',
  output: {
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.ejs$/, 
        use: {
          loader: 'ejs-webpack-loader',
          options: {
            data: { example: 'test' }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'output.html',
      inject: false,
      template: path.join(rootDir, '../compiler/templates/index.ejs'),
      { example: 'test' },
      minify: false
    })
  ]
}

Here's my 'index.ejs' file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include ./test.ejs %>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

And here's my 'test.ejs' file:

<meta charset="UTF-8">

I expect this to output an output.html file that looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

But instead I get this:

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

It looks like the ejs-webpack-loader is working and properly injects the partial, but then the HtmlWebpackPlugin is rendering JS instead of HTML.

How do I get the HtmlWebpackPlugin to render the HTML file properly?

I worked around the problem by tweaking the order of my merged webpack configs - whenever the EJS module rule is in the base config, it doesn't work, but if I move the EJS module rule to the entry config, it works fine.. I can reproduce this behavior in a simple repo if there's any interest in getting to the bottom of it. Seems to be an issue with webpack-merge — Cbas

felixmosh felixmosh · Accepted Answer · 2020-05-24T17:57:00

You don't need a special loader (ejs-webpack-loader) in your config, since HtmlWebpackPlugin comes with ejs support out of the box.

Just try to remove it. :]

Html Webpack Plugin renders JS module instead of HTML file

1 Answers