TypeError: undefined is not a function

[cheshire137]

After my haml task runs, all my resulting .html files have their contents replaced with:

<pre class='error'>TypeError: undefined is not a function
  at Function.eval (&lt;anonymous&gt;:2:19)
  at Function.&lt;anonymous&gt; (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:595:11)
  at execute (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:602:8)
  at Function.render (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:587:12)
  at hamlStream (/Users/me/myproject/node_modules/gulp-haml/index.js:15:21)
  at wrappedMapper (/Users/me/myproject/node_modules/gulp-haml/node_modules/map-stream/index.js:84:19)
  at Stream.stream.write (/Users/me/myproject/node_modules/gulp-haml/node_modules/map-stream/index.js:96:21)
  at Stream.ondata (stream.js:51:26)
  at Stream.EventEmitter.emit (events.js:95:17)
  at queueData (/Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:43:21)
  at next (/Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:71:7)
  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:85:7
  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/lib/src/bufferFile.js:8:5
  at fs.js:266:14
  at /Users/me/myproject/node_modules/gulp-watch/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:103:5
  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:103:5
  at Object.oncomplete (fs.js:107:15)
</pre>

Here are the relevant bits of my gulpfile.js:

var gulp = require('gulp');
var haml = require('gulp-haml');
gulp.task('haml', function() {
  gulp.src('./haml/**/*.haml').
       pipe(haml()).
       pipe(gulp.dest('./public'));
});
gulp.task('watch', function() {
  gulp.watch('./coffee/**/*.coffee', ['coffee']);
  gulp.watch('./less/**/*.less', ['less']);
  gulp.watch('./haml/**/*.haml', ['haml']);
});
gulp.task('default', ['less', 'coffee', 'haml', 'watch']);

[stephenlacy]

Open an issue on haml, not here. This is just an instance of haml The error is to do with the syntax of the haml files.

[cheshire137]

The Haml files were previously compiled using Guard and the Ruby 'haml' gem, so they are valid. I'll look into the haml-js project and see if there's a particular file that's throwing off gulp-haml.

[stephenlacy]

Can I see some of your haml files? The error may be related to the npm haml-js not liking certain haml characters.

[cheshire137]

The shorted example is this Haml file:

.form-group
  %label.control-label{for: 'vendor_name'}
    {{'Name' | translate}}:
  %input#vendor_name.form-control{type: 'text', 'ng-model' => 'vendor.name', placeholder: "{{'Name' | translate}}"}
  %p.help-block
    {{'vendor.name_explanation' | translate}}

The diff of Guard-produced HTML and what I got after running gulp haml is:

-<div class='form-group'>
-  <label class='control-label' for='vendor_name'>
-    {{'Name' | translate}}:
-  </label>
-  <input class='form-control' id='vendor_name' ng-model='vendor.name' placeholder="{{'Name' | translate}}" type='text'>
-  <p class='help-block'>
-    {{'vendor.name_explanation' | translate}}
-  </p>
-</div>
+
+<pre class='error'>TypeError: undefined is not a function
+  at Function.eval (&lt;anonymous&gt;:2:19)
+  at Function.&lt;anonymous&gt; (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:595:11)
+  at execute (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:602:8)
+  at Function.render (/Users/me/myproject/node_modules/gulp-haml/node_modules/haml/lib/haml.js:587:12)
+  at hamlStream (/Users/me/myproject/node_modules/gulp-haml/index.js:15:21)
+  at wrappedMapper (/Users/me/myproject/node_modules/gulp-haml/node_modules/map-stream/index.js:84:19)
+  at Stream.stream.write (/Users/me/myproject/node_modules/gulp-haml/node_modules/map-stream/index.js:96:21)
+  at Stream.ondata (stream.js:51:26)
+  at Stream.EventEmitter.emit (events.js:95:17)
+  at queueData (/Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:43:21)
+  at next (/Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:71:7)
+  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:85:7
+  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/lib/src/bufferFile.js:8:5
+  at fs.js:266:14
+  at /Users/me/myproject/node_modules/gulp-watch/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:103:5
+  at /Users/me/myproject/node_modules/gulp/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:103:5
+  at Object.oncomplete (fs.js:107:15)
+</pre>

Makes me think it is failing earlier on something else and then all the resulting HTML files get the same error.

[cheshire137]

Just did a test with the lib/cli.js provided in haml-js. I had this Haml: %div{ng: {include: "'pagination.html'"}}. The HTML that the gem generated was <div ng-include="'pagination.html'"></div>. The cli.js produced the following: "<div ng=\"" + undefined({include: "'pagination.html'"}) + "\">". It quoted all of the resulting HTML so I'm not worried about that, but the undefined bit in the middle might be the problem.

[cheshire137]

Hm, so I thought maybe it was the ng: {include syntax. However, the Haml %span{ng: {hide: 'deployments.length === 1'}} becomes "<span ng=\"" + undefined({hide: 'deployments.length === 1'}) + "\">" +.

[stephenlacy]

I just tested your snip of code with https://npmjs.org/package/hamljs to see if I should switch over to that project, but I got additional errors:

/home/me/test/node_modules/hamljs/lib/haml.js:677
      throw err
            ^
HamlError: (Haml):3 unexpected attrs
    at Object.<anonymous> (/home/me/test/test.js:7:18)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:902:3

Does it seem to be the nested object causing the undefined issue?

I am not to sure about the javascript engines for haml at this point... I do write my sites in jade, which could be considered as a coffee-script like haml.

[stephenlacy]

Any updates?

[cheshire137]

Sorry about that! I ended up creating gulp-ruby-haml to just use the haml provided by the Ruby gem since all of my project's Haml files were compiling with Ruby Haml and I saw that Haml.js isn't fully compatible with Ruby Haml. It seemed easier than trying to get all my files to work with Haml.js. Thank you though!

[stephenlacy]

Alright. I will close this now

[txbm]

7 adds support for the other compiler visionmedia/haml.js in case anybody else runs into syntax difference woes. The creationix/haml-js compiler has been heavily "enhanced" by it's author, so certain behaviors coming from traditional HAML syntax are a bit unexpected. The visionmedia compiler adheres more strictly to the official HAML API.

[masonicboom]

I had the same problem as @moneypenny. It was due to using single quotes around attributes in the HAML, rather than double quotes.

[lozandier]

@moneypenny @masonicboom I had the same problem a couple of months ago (a month after this original ticket), the solution for me was to not use the old Ruby hash syntax but the new one introduced with recent versions of Ruby; instead of %valid_element_name{ "attribute" => "value" } you use %valid_element_name{ attribute: "value" } instead.