fix: template rendering error in serve/watch mode with JS templates, #174

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.20.4 (2025-06-28)
+
+- fix: template rendering error in serve/watch mode with JS templates, #174
+  This issue was introduced in v4. In v3 works fine.
+
 ## 4.20.3 (2025-06-27)
 
 - fix: handlebars preprocessor when a partial is used in both a Handlebars template and a JS template, #174

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.3",
+  "version": "4.20.4",
   "description": "Generates complete single-page or multi-page website from source assets. Built-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Loader/Option.js

@@ -81,7 +81,10 @@ class Option {
       options.contextDir = loaderOptions.context || '';
 
       // whether it should be used ESM export for the rendered/compiled result
-      options.esModule = options?.esModule === true;
+      options.esModule = options.esModule === true;
+
+      // save the initial value defined in the webpack config
+      options.originalPreprocessorMode = options.preprocessorMode;
 
       // set reference to sources defined directly in plugin options
       if (this.#pluginOption.options?.sources != null) {
@@ -148,7 +151,6 @@ class Option {
     const queryData = this.#queryData;
     const options = this.#options;
     const issuer = loaderContext._module.resourceResolveData?.context?.issuer || '';
-
     let [defaultPreprocessorMode] = this.preprocessorModes;
     let isIssuerScript = false;
     let preprocessorMode;
@@ -177,6 +179,10 @@ class Option {
       }
     }
 
+    // reset the original option value, also no cached state,
+    // because the loader works in different modes depend on the context
+    options.preprocessorMode = options.originalPreprocessorMode;
+
     if (preprocessorMode && this.preprocessorModes.has(preprocessorMode)) {
       options.preprocessorMode = preprocessorMode;
     } else if (!this.preprocessorModes.has(options.preprocessorMode)) {

src/Loader/Preprocessors/Handlebars/index.js

@@ -1,8 +1,8 @@
 const path = require('path');
+const LoaderFactory = require('../../LoaderFactory');
 const { stringifyJSON, stringifyFn } = require('../../Utils');
 const { loadModule, readDirRecursiveSync } = require('../../../Common/FileUtils');
 const { isWin, pathToPosix } = require('../../../Common/Helpers');
-const LoaderFactory = require('../../LoaderFactory');
 
 // node module name
 const moduleName = 'handlebars';
@@ -239,11 +239,11 @@ const preprocessor = (loaderContext, options) => {
         }
 
         // normalize the name to variable-safe name
-        const varName = name.replace(/[\/-]/g, '_');
+        const varName = 'partial_' + name.replace(/[\/-]/g, '_');
 
         precompiledPartials += `
-        var partial_${varName} = ${compiled};
-        Handlebars.partials['${name}'] = Handlebars.template(partial_${varName});
+        var ${varName} = ${compiled};
+        Handlebars.partials['${name}'] = Handlebars.template(${varName});
         `;
       }
 
@@ -286,7 +286,7 @@ const preprocessor = (loaderContext, options) => {
         ${precompiledHelpers}
         ${precompiledTemplate}
         var ${exportFunctionName} = (context) => {
-          var template = (Handlebars['default'] || Handlebars).template(precompiledTemplate);
+          var template = (Handlebars.default || Handlebars).template(precompiledTemplate);
           return template(Object.assign({}, data, context));
         };
         ${exportCode}${exportFunctionName};`;

src/Plugin/Resolver.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const Collection = require('./Collection');
 const { resolveException } = require('./Messages/Exception');

test/manual/watch-hbs-partials-js-tmpl/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "webpack serve",
+    "watch": "webpack watch --mode development",
+    "build": "webpack --mode=production --progress"
+  },
+  "devDependencies": {
+    "html-bundler-webpack-plugin": "file:../../.."
+  }
+}

test/manual/watch-hbs-partials-js-tmpl/src/app.hbs

@@ -0,0 +1,11 @@
+{{#> layout}}
+  {{#*inline "navContainer"}}
+    {{> nav}}
+  {{/inline}}
+  {{#*inline "contentContainer"}}
+    {{> content}}
+  {{/inline}}
+  {{#*inline "footerContainer"}}
+    {{> footer}}
+  {{/inline}}
+{{/layout}}

test/manual/watch-hbs-partials-js-tmpl/src/app.js

@@ -0,0 +1,12 @@
+import tmpl from './app.hbs';
+
+const locals = {
+  helloName: 'World',
+  name: 'Max',
+  age: 21,
+  navText: 'Navigation',
+};
+
+document.getElementById('app').innerHTML = tmpl(locals);
+
+console.log('>> app');

test/manual/watch-hbs-partials-js-tmpl/src/data/index.js

@@ -0,0 +1,13 @@
+// import { productsDB } from './productsDB';
+
+export default {
+	projectName: 'projectName',
+	copyright: 'copyright',
+	// smallSliderProductCards: [
+	// 	productsDB[874],
+	// 	productsDB[8711],
+	// 	productsDB[8711],
+	// 	productsDB[874],
+	// 	productsDB[8711],
+	// ]
+}

test/manual/watch-hbs-partials-js-tmpl/src/data/productsDB.js

@@ -0,0 +1,12 @@
+export const productsDB = {
+	874: {
+		id: '874',
+		currentPrice: '5 489',
+		prevPrice: false,
+	},
+	8711: {
+		id: '8711',
+		currentPrice: '7 103',
+		prevPrice: '7 896',
+	},
+};