Uncaught ReferenceError: Handlebars is not defined

[mcasassa-ext]

Good afternoon :)
I wanted to reach out as I could not find any solutions through trusty google. At my company we use Handlebars templates to render content at runtime, we are attempting to upgrade our version from 1.3.0 to 4.7.7 but we are running into the error of Uncaught ReferenceError: Handlebars is not defined
We are storing the min file locally https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js and importing handlebars into relevant files using Handlebars = require('handlebars').
After the upgrade it appears that our templates are loading correctly but I need to identify the source of this error so we can begin regression and confirm there is no impact.
Any help is appreciated on this issue and thanks in advance.

[jaylinski]

Can you provide a reduced test-case that reproduces the error? Otherwise it's hard for me to help you.

[mcasassa-ext]

Thank you for your response, I will work with my team to implement a test case for this scenario and get the data back here. Please provide specifics if you need them.

[mcasassa-ext]

Good day, I have attempted to implement a test case to share more data but I was unsuccessful as our application broke because of node version. Looked into the code again I found the source of the error "Uncaught ReferenceError: Handlebars is not defined" is originating from a file that looks like it is being generated at runtime templates.js this location is attempting to run a function

this["merlinTemplates"]["abandonPage/abandonPage"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;


  buffer += "<div class=\"row pop \">\n	<div class=\"pop-wrap\">\n		\n	</div>\n	<div class=\"pop-wrap\">\n       <b>"
    + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.abandonPage)),stack1 == null || stack1 === false ? stack1 : stack1.message)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
    + "</b>\n    </div>\n    <div class=\"pop-footer right\">\n        <button class=\"text-button button cancel\">"
    + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.buttons)),stack1 == null || stack1 === false ? stack1 : stack1.no)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
    + "</button>\n        <button class=\"radius grey button continue\">"
    + escapeExpression(((stack1 = ((stack1 = (depth0 && depth0.buttons)),stack1 == null || stack1 === false ? stack1 : stack1.yes)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
    + "</button>\n    </div>\n</div>";
  return buffer;
  });

This above mentioned function seems have a unique variation for each template we have in our code base, any modification to this file is removed after saving and our local build runs.

More details about our application:
Node Version: 12.19.0
We run vanilla JS, Jquery and utilize handlebars for templating with no html. We do not use Webpack and our installation of handlebars utilizes the CDN min file. Me and my team are currently at a loss of how to resolve this issue nor does it appear that the error being thrown is impacting our functionality. Thank you for your assistance and time with this issue.

[jaylinski]

In a Node environment, you should import Handlebars like this (and install it via npm):

const Handlebars = require("handlebars");

The CDN min file is optimized for browsers.

[mcasassa-ext]

We import Handlebars into files using var Handlebars = require('handlebars') Declaration as a Const requires ES6 and we are running ES5.

[jaylinski]

Are you making sure that the handlebars-cdn-script is loaded before the templates are executed?

[mcasassa-ext]

Yes we have a console output when our application is finished initializing and the Uncaught ReferenceError shows up in the console after that message.

[jaylinski]

Sorry, but I'm out of ideas.

[mcasassa-ext]

Also we are using Grunt versions: grunt-cli v1.4.3, grunt v1.5.3. I will include our configuration in our Grunt file for Handlebars.

handlebars: {
        options: {
          namespace: 'merlinTemplates',
          processName: function(filePath) {
            return filePath.replace(/^templates\//, '')
              .replace(/\.hbs$/, '')
              .replace(/source\//, '')
              .replace(/modules\//, '');

          }
        },

        all: {
          files: {
            "source/modules/templates.js": ["source/modules/**/*.hbs"]
          }
        }
      }