Mysterious Build Failure When Importing Modal Template in Large Project

[Poliklot]

Description

In my closed production project, importing a simple Handlebars template (src/views/components/sections/modals/loaded-modals.hbs) in a JS file causes a build failure with a parsing error. The template is minimal, containing only an empty <div>, and isn’t even used in the code.

The import in src/scripts/app.js:

import tmpl from '../views/components/sections/modals/loaded-modals.hbs';

The error is:

ERROR in ./src/views/components/sections/modals/loaded-modals.hbs 8188:34
Module parse failed: Unexpected token (8188:34)
File was processed with these loaders:
 * ./node_modules/html-bundler-webpack-plugin/src/Loader/index.js
 * ./node_modules/handlebars-loader/index.js
You may need an additional loader to handle the result of these loaders.
|           return template(Object.assign({}, data, context));
|         };
>         module.exports=templateFn;

The lack of specific error details makes it hard to pinpoint the issue. Better logging or error messages would help identify what to investigate in the large project.

Steps to Reproduce

not reproducible in the minimal repository

Expected Behavior

The plugin should handle the import of a simple template without causing build failures, or provide clearer error messages to help diagnose the issue in a large project.

Actual Behavior

Importing the loaded-modals.hbs template causes a build failure with a vague parsing error, and the lack of detailed logging makes debugging difficult.

Additional Context

Since this issue only occurs in my closed production repository, I can’t share the full project directly. Creating a sanitized version of the project would be very time-consuming. Could you suggest what specific information I could provide (e.g., Webpack config details, dependency list, or debug logs) to help diagnose the issue? Alternatively, are there ways to enable more detailed logging in the plugin to pinpoint the problem? I’m happy to share any relevant details or test fixes.

Thanks for your continued support! 🙌 I’m happy to provide more details or test any fixes. 🚀

[webdiscus]

@Poliklot

can you provide the loaded-modals.hbs template?

[webdiscus]

If used the html-bundler-webpack-plugin, then no others loaders should be used.
Please, remove the handlebars-loader from Webpack config.

[Poliklot]

@webdiscus

Thanks for the quick response! 🙌 I removed the handlebars-loader from my Webpack config as you suggested, but unfortunately, the issue persists. 😅 Here’s the updated error:

ERROR in ./src/views/components/sections/modals/loaded-modals.hbs 8336:34
Module parse failed: Unexpected token (8336:34)
File was processed with these loaders:
 * ./node_modules/html-bundler-webpack-plugin/src/Loader/index.js
You may need an additional loader to handle the result of these loaders.
|           return template(Object.assign({}, data, context));
|         };
>         module.exports=templateFn;
 @ ./src/scripts/test-import.js 1:0-73 2:12-16

ERROR in [entry] [initial]
result.push is not a function

Here’s the minimal setup to reproduce the issue in my closed production project:

src/views/components/layouts/layout.hbs:

<script src="@scripts/test-import.js" defer></script>

src/scripts/test-import.js:

import tmpl from '../views/components/sections/modals/loaded-modals.hbs';

console.log(tmpl({}));

src/views/components/sections/modals/loaded-modals.hbs:

<div>Please!</div>

Since this only happens in my closed production repo and not in my minimal repo, could you suggest what specific info I could provide (e.g., Webpack config, dependencies, or debug logs) to help pinpoint the issue? Is there a way to enable more detailed logging in the plugin to see what’s causing this? Sanitizing the project would take a lot of time. 😓 Thanks for your awesome support! 🚀

[webdiscus]

@Poliklot, unfortunately I can't reproduce your issue.

Use please the minimal setup to reproduce the issue: handlebars-compile-issue-template

Wohle plugin code is covered with own exceptions, these provides more details, but the issue caused directly from Webpack, outside plugin exceptions, I can't help, sorry.

Can you provide Webpack config and loaded-modals.hbs?

[Poliklot]

@webdiscus

Hooray — the build finally passes! 🎉
Thank you for patiently helping me for five consecutive days!

I opened a PR: “fix: stripComments handles RegExp literals”

This is my first detailed pull request, so I really hope I did everything correctly.
If you see something missing — just let me know, I’ll update it right away!

Bug root: stripComments treated // and /* */ inside RegExp literals as real comments, so the final JS broke.
The problem was this innocent-looking // magic comment in my helpers file:

getCategoryHeader(title) {
    if (typeof title !== 'string') return '';

    const escapeHTML = (s) =>
        s
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');

    const SEP = /(\s|&nbsp;|<br\s*\/?>)+/gi;

    const parts = title.split(SEP).filter(Boolean);
    const lastWord = parts.pop() || '';
    const firstPart = parts.join(''); // magic comment

    if (!firstPart.trim()) {
        return new Handlebars.SafeString(`<p class="category-card__title">${escapeHTML(lastWord)}</p>`);
    }

    return new Handlebars.SafeString(
        ``,
    );
},

Thanks again for maintaining such a great plugin — it saves us tons of time! 🙌

[webdiscus]

@Poliklot,

Your PR has been included in version 4.20.10.
Thank you for great work!