Error using handlebars-helpers with browserify

[jonschlinkert]

Error using handlebars-helpers with browserify

[markcarey]

It worked! :)

Thank you, much appreciated.

(Next step for me: shrink down the massive 2.3MB browserified js file -- that thing is huge!) ;)

[jonschlinkert]

shrink down the massive 2.3MB browserified js file

lol the trouble with tribbles, our files just keep growing!

[jonschlinkert]

That error is pretty common. It's most likely that you just need to delete node_modules and reinstall everything then try again without doing anything special.

If that does't work, I might need more details on your setup - like how you're browserifying, etc.

[markcarey]

This error does not happen processing the same template on the server side using node.js, only in the browser on the client-side.

But just in case, I have deleted the node_modules, ran cpm install, then browserify again. Same error. Here is the current browserify task:

gulp.task('browserify', function () {
  process.env.UNLAZY = true;
  var b = browserify({
    entries: './javascript/src/api.js',
    debug: true,
    // Tell browserify that Handlebars is loaded already
    external: 'Handlebars'
  });

  // ignore the internal handlebars require
  b.ignore('handlebars');

  return b.bundle()
    .pipe(source('api.js'))
    .pipe(buffer())
    //.pipe(uglify({mangle: false}))
    .pipe(gulp.dest('javascript/'));
});

For clarity, note that this error shows in the browsers console when Handlebars attempts to render a precompiled template that contains one of the helpers.

[jonschlinkert]

process.env.UNLAZY = true needs to be the first thing before any requires. Otherwise it will have already "lazied" everything

[doowb]

Handlebars attempts to render a precompiled template that contains one of the helpers.

Where are you browserifying the precompiled templates? Have you tried the helpers with a template that you compile and render in the browser? I think this is an issue with the Handlebars runtime being different when you pre-compile than the one that's in the browser when you try to render the templates.

Do you have a reduced example repository that shows the error so we can narrow down what's causing this issue?

[markcarey]

Both handlebars versions are 4.0.5, installed via npm on the server side and using the following CDN url on the browser side:
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.runtime.min.js

Here is the gulp task that does the precompilation:

var handlebars = require('gulp-handlebars');
var hb = require('handlebars');
var helpers = require('handlebars-helpers')({
  handlebars: hb
});

gulp.task('templates', function() {
  // Load templates from the templates/ folder relative to where gulp was executed
  gulp.src('views/**/*.handlebars')
    // Compile each Handlebars template source file to a template function
    .pipe(handlebars({
      handlebars: hb
    }))
    // Wrap each template function in a call to Handlebars.template
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    // Declare template functions as properties and sub-properties of exports
    .pipe(declare({
      namespace: 'templates',
      noRedeclare: true, // Avoid duplicate declarations
      processName: function(filePath) {
        // Allow nesting based on path using gulp-declare's processNameByPath()
        // You can remove this option completely if you aren't using nested folders
        // Drop the templates/ folder from the namespace path by removing it from the filePath
        return declare.processNameByPath(filePath.replace('templates/', ''));
      }
    }))
    // Concatenate down to a single file
    .pipe(concat('index.js'))
    // Add the Handlebars module in the final output
    //.pipe(wrap('var Handlebars = require("handlebars");\n <%= contents %>'))
    // WRite the output into the templates folder
    .pipe(gulp.dest('templates/'));
});

I have also tried setting UNLAZY on the command line before the browserify task like this:
export UNLAZY=true; gulp browserify

Just now I moved the process.env.UNLAZY = true line to very top of the gulpfile.js, and the error persists.

As a bit of added info, some of the templates do render, including some that use different helpers from the collection, but I get the error in this case, which seems to be the forEach helper, which seems to rely on the lazy-loading of extend-shallow.

[doowb]

Are you browserifying the handlebars-helpers library and registering the helpers with the client-side version of Handlebars?

I think that's where it needs to be, otherwise the modules in the handlebars-helpers library won't be in the list of browserified modules in the client-side script.

[markcarey]

Here is the code that is being browserified. And, as mentioned, some of the handlebars-helpers are working correctly in the browser, just not forEach (and perhaps others, not sure). So it doesn't seem like an issue of the helpers not be registered. If the helpers were not registered, then it would die long before extend-shallow, which only exists in the helper function and/or utils.

var helpers = require('handlebars-helpers')({
  handlebars: Handlebars
});

[markcarey]

Here is a stripped down repo that demonstrates this issue:

https://github.com/markcarey/browserify-hh-test

There are two examples, one that shows the compare helper works as expected and the other that shows the forEach helper results in the extend-shallow error in the browser console.

[jonschlinkert]

Ok, we did some digging and @doowb found a dependency of handlebars-helpers, create-frame that itself had outdated dependencies that might have caused the issue. We updated the deps in create-frame, can you try reinstalling everything and see if that works? sorry and thanks for being patient