Html-webpack-plugin: Fails to compile, when I try to use include with EJS files. (Error: Child compilation failed.)

[andrasna]

Demo:

https://github.com/andrasna/html-ejs-webpack-config-issue-demo

Expected behaviour

I am trying to include one EJS file into another, as per documentation:

https://ejs.co/#docs

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

What I would expect, is for the HTML within partial.ejs to be included in the index.ejs file.

Current behaviour

I get "Error: Child compilation failed" (see full error message below).

However, EJS gets compiled if I remove the line with the include in index.ejs.

Any ideas?

Error message

npm start

[email protected] start /Users/user/Dev/html-ejs-webpack-config--issue-demo
webpack-dev-server --mode development

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/user/Dev/html-ejs-webpack-config--issue-demo
✖ ｢wdm｣: Hash: f9f8666f87ab7acd22cd
Version: webpack 4.41.2
Time: 595ms
Built at: 19/10/2019 15:34:18
Asset Size Chunks Chunk Names
index.html 1.72 KiB [emitted]
main.js 360 KiB main [emitted] main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^.\/log$] (webpack)/hot sync nonrecursive ^.\/log$ 170 bytes {main} [built]
[./src/index.js] 0 bytes {main} [built]
+ 18 hidden modules

ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )

• Function

• lodash.js:14870
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14870:16

• lodash.js:473 apply
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:473:27

• lodash.js:15254
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:15254:16

• lodash.js:475 apply
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:475:27

• lodash.js:6563
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:6563:16

• lodash.js:14869 Function.template
  [html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14869:20

• SyntaxError: Unexpected token )

• compiler.js:79 childCompiler.runAsChild
  [html-ejs-webpack-config--issue-demo]/[html-webpack-plugin]/lib/compiler.js:79:16

• Compiler.js:343 compile
  [html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:343:11

• Compiler.js:681 hooks.afterCompile.callAsync.err
  [html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:681:15

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20

• Compiler.js:678 compilation.seal.err
  [html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:678:31

• Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20

• Compilation.js:1423 hooks.optimizeAssets.callAsync.err
  [html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compilation.js:1423:35

Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] 922 bytes {0} [built] [failed] [1 error]

ERROR in ./index.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs)
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )
    at Function (<anonymous>)
    at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14870:16
    at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:473:27)
    at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:15254:16
    at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:475:27)
    at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:6563:16
    at Function.template (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14869:20)
    at Object.module.exports (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/html-webpack-plugin/lib/loader.js:28:22)

ℹ ｢wdm｣: Failed to compile.

[demiculus]

@andrasna were you able to solve the issue?

[andrasna]

@demiculus Hi, unfortunately, I haven't been able to solve the issue. For the same purpose, have started to experiment with handlebars instead, which seems do what I previously had in mind. You can check it out here: https://github.com/andrasna/templating-webpack-config

[jantimon]

What you can do is the following:

Use an ejs-loader e.g. https://www.npmjs.com/package/ejs-loader

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      { test: /\.ejs$/, loader: 'ejs-loader' },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/template.ejs",
    }),
  ]
};

template.ejs

<html>
<body>
   <%= require("./another-file.ejs")() %> 
</body>
</html>

See also:

https://codesandbox.io/s/html-webpack-plugin--layout-2-ntuzk

[demiculus]

@demiculus Hi, unfortunately, I haven't been able to solve the issue. For the same purpose, have started to experiment with handlebars instead, which seems do what I previously had in mind. You can check it out here: https://github.com/andrasna/templating-webpack-config

I tried 3 different ejs loaders and none of them worked. So I've used html-loader to solve my issue. I know it is not the best method but it works.

rules = [
    {
      test: /\.(ejs)$/, // Using this for .ejs files https://stackoverflow.com/questions/43494794/webpack-html-webpack-plugin-error-child-compilation-failed/43498313
      use: {
        loader: 'html-loader',
        options: {
          attrs: [':data-src']
        }
      }
    }
];

[jantimon]

Did you try require instead of include like this?

<html>
<body>
   <%= require("./another-file.ejs")() %> 
</body>
</html>

[JoMartinezZhu]

please use compile-ejs-loader