Template includes not working coupled with apply-loader

[gizm0bill]

When I try to use include of another file inside a template it's now working, throwing: TypeError: __webpack_require__(...).call is not a function... because the template is already applied by the apply-loader and yields a string, so webpack can't call it as a function.

Here is a minimal reproduction of the bug: https://github.com/gizm0bill/pug-loader-include-bug-demo (just build it, run a server over ./dist and check console)

This thing used to work before, about 3 months ago. Do you have any idea what's going on there, maybe something on webpack's side? I see you didn't change the require part recently

[impulsenok]

We've caught same issue.
Any suggestions?

[sirno]

For people who find this issue. You can nicely work around this by using mixins.
Just define mixins in a separate file, include the file and call the mixins where you would usually have included the layout.

[khalidhoffman]

I think you may need to exclude the pug files you reference with include from the apply-loader!pug-loader! loader and create a separate loader with only the pug-loader for those files referenced by include.

[tomiyamag]

I solved using apply-loader only for the ./src/pug/includes as below.
And store the static page in ./src/pug/pages .

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        exclude: path.resolve(__dirname, 'src/pug/includes'),
        use: ['apply-loader', 'pug-loader']
      },
      {
        test: /\.pug$/,
        exclude: path.resolve(__dirname, 'src/pug/pages'),
        loader: 'pug-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!pug-loader!./src/pug/_template.pug',
      filename: '../../index.html'
      // other options
    })
  ]
};

[aaimaai]

I had this same issue after updating to Angular 7. The error message was a bit different:
ERROR in __webpack_require__(...).call is not a function
In ng-add-pug-loader.js inside the pugRules variables you see how the pug loader tries to exclude the files that contains partials and are included into the pug files using the include statement. These files must end with either .include.pug (or .jade) or .partial.pug (or .jade).

I solved the issue by adding .include.pug to all filenames that where used with the include statement in our .pug files.

[jonathanstokes]

Is this still an issue? We recently upgraded from to Angular 8 and I would have expected to see this error. I have NOT renamed any .pug files to *.include.pug, and I'm not seeing any error. Wondering if we should rename them anyway.

Just guessing, but, could something have been changed in apply-loader to fix this?

[webdiscus]

Is this still an issue? We recently upgraded from to Angular 8 and I would have expected to see this error. I have NOT renamed any .pug files to *.include.pug, and I'm not seeing any error. Wondering if we should rename them anyway.

Just guessing, but, could something have been changed in apply-loader to fix this?

Try to use alternative pug-loader. This loader has 3 methods:

• compile pug to template function (same as this loader)
• render into HTML and export as JS module (CommonJS or ES), the result is same as this pug-loader + apply-loader, but not need any additional loader
• render into pure HTML string to handle it in additional loader such as html-loader