Integrate with gulp-webpack problem : __webpack_require__(...).call is not a function

[zhiyan]

Hi, i use gulp-webpack and handlebars-loader , but find a problem :

gulpfile.js:

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src('src/scripts/entry.js')
    .pipe(named())
    .pipe(webpack({
      watch: true,
      module: {
        loaders: [
          { test: /\.handlebars$/, loader: "handlebars-loader" }
        ]
      }
    }))
    .pipe(gulp.dest('dev/scripts/'));
});

entry.js:

var template = require("./book.handlebars");
console.log(template({a:1,b:231}));

when run gulp , there is no error output.but i use the browser,find the error in console:

Uncaught TypeError: __webpack_require__(...).call is not a function

So, i open the file which packed:

...
  + this.escapeExpression(__webpack_require__(3).call(depth0,
...
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
  var a = 1;
  module.exports = 1;
...

module 3 is not a function, but the data i supplied.

[zhiyan]

I found the point. If I have a file (main.js) require a template like this:

{{a}}

and in the same dir with main.js has a file a.js, then the compile will run error. Even I didn't require a.js, the code of a.js will be packed in the packfile.And go out with:

Uncaught TypeError: __webpack_require__(...).call is not a function

the error above.
Is it my config problem?

[altano]

Hey Zhiyan. Sounds like 'a' is not resolving correctly. Can you just link me to the exact code that reproduces the issue so I can debug it?

[Swizec]

I just spent two hours debugging the same [or similar] issue. I wans't using Gulp though.

The packaged JS threw the same error, Uncaught TypeError: __webpack_require__(...).call is not a function but only if I had helperDirs[] set.

The problem was this code in my template:

 {{#each pages}}
 <li {{#active}}class="active"{{/active}}>
       <a href="{{url}}">{{label}}</a>
 </li>
 {{/each}}

It went away after I changed the above to this:

  {{#each pages}}
  <li {{#active}}class="active"{{/active}}>
        <a href="{{this.url}}">{{label}}</a>
  </li>
  {{/each}}

I'm not sure why that fixed the problem, but it smells like handlebars-loader was trying to look for a {{url}} helper when it wasn't supposed to.

[altano]

Can either of you reproduce the issue either with a unit test or just uploading a complete reproduction of the issue (e.g. template and webpack config). You both provided one but not the other. Would make it easier for me to debug the issue.

[zhiyan]

hi, altano, I create a simple instance to reproduct the problem:

template.handlebars:

<p>{{a}}</p>

index.js:

var template = require("./template.handlebars");
var html = template({"a":2});

a.js:

module.exports = 123;

index.html:

<script src="./bundle.js"></script>

webpack.config.js:

module.exports = {
    entry: "./index.js",
    watch:true,
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.handlebars$/, loader: "handlebars-loader" }
        ]
    }
};

when I browser index.html, the console show:

Uncaught TypeError: __webpack_require__(...).call is not a function

but when I replace the name of a.js with b.js, all go right.

[ajcarpenter]

I hit this same issue when using a variable called url. With debug on, handlebars-loader output this:

Attempting to resolve helpers:
{ '$url': '/[project_dir]/node_modules/node-libs-browser/node_modules/url/url.js' }

Is it possible to configure handlebars-loader to exclude node_modules from the lookup so it will only resolve with the built-in handlebars helpers or helpers we explicitly define with helperDirs?

Edit: I tried setting rootRelative to be a sibling directory of node_modules but it is still resolving to the above module.

[stevewillard]

Have the exact same problem with {{url}} and changing to {{this.url}} fixed my problem

[altano]

@ericmatthys proposed a solution in this PR: #57

It looks fine to me (in addition to the this.X workaround when you have conflicting modules and data). Can anyone in this thread chime in and say that the solution is good for them too?
If so I'll take the PR as a solution to this issue.

Thanks!

[psimyn]

@altano PR works for me (had issue with {{url}} previously)

[duncanbeevers]

Continuing the conversation from #57

If excluding node_modules becomes the default (along the accompanying major version bump), can't #57 go away?

Those who want to opt in to the old behavior can manually add node_modules back to their helperDirs.

[eden-lane]

I have an issue similar to this. I have template title.jade:

input(type="text", text="{{title}}")

When I'm trying to use this template, I get Maximum call stack size exceeded because template trying to include title.jade into {{title}}

[Bnaya]

Same issue here, url treated as helper name instead of variable