Unhandled rejection TypeError: tmpl is not a function

[olivertappin]

Coming across a strange dependency error when attempting to generate SVG symbols using this plugin. My gulpfile.js is as follows:

var gulp = require('gulp');
var rename = require('gulp-rename');
var svgsymbols = require('gulp-svg-symbols');

/* ... */

gulp.task('generate-sprites', function () {
  return gulp.src('resource/img/sprites/*.svg')
    .pipe(svgsymbols({
        svgClassname: 'svg-icons',
        id: 'icon-%f',
        className: '.icon-%f svg',
        templates: [
            'default-svg',
            path.join(__dirname, 'resource/sass/_settings.sprite-template.scss')
        ]
    }))
    .pipe(rename(function(path) {
        if (path.extname === '.scss') {
            path.basename = '_components.sprites';
        } else {
            path.basename = 'sprites';
        }
    }))
    .pipe(gulp.dest('resource/sass'));
});

I've tried reinstalling my global dependencies and used npm cache clean && rm -rf node_modules && npm install to ensure my local dependences are installed from fresh.

I've had a go at going through the dependances myself (with not much luck) such as consolidate, bluebird and lodash, as some other plugins have had this issue. Please see https://github.com/adamayres/gulp-wrap/pull/29/files for more information about the same error in the gulp-wrap plugin.

I have also reduced my Gulp task to use no settings whatsoever:

gulp.task('generate-sprites', function () {
  return gulp.src('resource/img/sprites/*.svg')
    .pipe(svgsymbols())
    .pipe(gulp.dest('resource/sass'));
});

Which has the same error. Here's some more information on my local setup. If you need anything else to help reproduce the error, just ask.

$ gulp generate-sprites
[23:31:53] Using gulpfile ~/Sites/skeleton/gulpfile.js
[23:31:53] Starting 'generate-sprites'...
Unhandled rejection TypeError: tmpl is not a function
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:779:16
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:143:5
    at Promise._execute (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/debuggability.js:299:9)
    at Promise._resolveFromExecutor (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/promise.js:481:18)
    at new Promise (/Users/oliver/Sites/skeleton/node_modules/bluebird/js/release/promise.js:77:14)
    at promisify (/Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:136:10)
    at Function.exports.lodash.render (/Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:775:10)
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:164:27
    at /Users/oliver/Sites/skeleton/node_modules/consolidate/lib/consolidate.js:98:5
    at tryToString (fs.js:455:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)

$ npm ls consolidate
skeleton-theme@1.0.0 /Users/oliver/Sites/skeleton
└─┬ gulp-svg-symbols@2.0.0
  └── consolidate@0.14.1 

$ cat package.json
{
  ...
  "dependencies": {
    ...
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-svg-symbols": "^2.0.0",
    ...
  },
  ...
}

$ npm -v
3.10.7

$ node -v
v6.7.0

$ gulp -v
CLI version 3.9.1
Local version 3.9.1

[Hiswe]

hi,

Thank you for this detailed feedback :) I'll check

[Hiswe]

@olivertappin I couldn't reproduce…

I've been testing with the example folder with

node:

v5.12.0
v6.7.0

and gulp -v:

[10:22:52] CLI version 1.2.2
[10:22:52] Local version 3.9.1

Can you clone this repo and run the tests? npm test And also play with the examples to see if you can reproduce :S

[olivertappin]

Sure, let me give this a try and get back to you.

[olivertappin]

Ran the npm test and all looks fine:

npm test

> gulp-svg-symbols@2.0.0 test /Users/oliver/Desktop/gulp-svg-symbols
> gulp test

[22:54:24] Using gulpfile ~/Desktop/gulp-svg-symbols/gulpfile.js
[22:54:24] Starting 'test'...
Running 54 specs.
Plugin – basic
    should produce two files: passed
    should have the right output if called many times: passed
    can generate a demo page: passed
Plugin - defs
    should handle svg with defs: passed
    should handle svg withouts defs: passed
    should handle svg with empty defs: passed
Plugin - style tags
    should remove style attributes and put content in another file: passed
Plugin - empty groups
    should remove empty groups: passed
Plugin - title
    should handle title: passed
    should remove title if title option is false: passed
    should remove title if title option is an empty string: passed
    should't add a title if one is already there: passed
Plugin - id
    should slug ids: passed
    should handle speakingurl options: passed
    should handle custom slug function: passed
Plugin - preserveAspectRatio
    should'nt add preserveAspectRatio if none present on source: passed
    should port preserveAspectRatio with a value of "none": passed
    should port preserveAspectRatio with any value: passed
Render default-svg
    should add a classname to root SVG when passed as option: passed
Render custom templates
    should render a random template with random infos: passed
    should render an array of templates: passed
get SVG datas - Gather basic info from SVG
    should be an object: passed
    should have the right width: passed
    should have the right height: passed
    should have the right viewbox: passed
    should output the right name: passed
get SVG datas - Handle SVG without dimensions
    should have the right width: passed
    should have the right height: passed
    should have the right viewbox: passed
get SVG datas - Handle SVG without dimensions
    should have the right width: passed
    should have the right height: passed
    should have the right viewbox: passed
get SVG datas - Handle SVG with percent dimensions
    should have the right width: passed
    should have the right height: passed
    should have the right viewbox: passed
Transform data - default
    should be an object: passed
    should have the raw datas: passed
    should have the right id: passed
    should have the right className: passed
    should have the right title: passed
    should output the right width: passed
    should output the right height: passed
Transform data - default & options
    should be an object: passed
    should have the raw datas: passed
    should have the right id: passed
    should have the right className: passed
    should have the right title: passed
    should output the right width: passed
    should output the right height: passed
Transform - title should be removable
    shouldn't have a title: passed
Transform - custom & options
    should be an object: passed
    should have only user keys: passed
    should have the raw datas that can't be overwritten: passed
    should have the right id: passed

54 specs, 0 failures
Finished in 0.5 seconds
[22:54:25] Finished 'test' after 570 ms

So not sure how to proceed.

If it helps, I'm on macOS 10.12

[Hiswe]

@olivertappin I'm also in 10.12

Can you try to go in the example folder, make a npm install then access all tasks names with gulp, and launch some please?

[olivertappin]

Hi, those tests seem to work fine:

➜  examples git:(master) ✗ gulp
[16:35:55] Using gulpfile ~/Desktop/gulp-svg-symbols/examples/gulpfile.js
[16:35:55] Starting 'task-list'...
 Task name         Description                                                                      Dependencies 
 task-list                                                                                                       
 default                                                                                            task-list    
 svg                default options output                                                                       
 demo-page          adding the demo page                                                                         
 svg-classname      add a class name to the outputed SVG in case of SVG being included in the DOM                
 custom-template    custom templates & files in different folders                                                
 aspect-ratio       custom template to test aspect ratio                                                         
[16:35:55] Finished 'task-list' after 7.11 ms
[16:35:55] Starting 'default'...
[16:35:55] Finished 'default' after 18 μs

But I notice it's referencing the plugin from the repository directly using:

var svgSymbols = require('../index');

A better example, and one that fails for me, is when we're referencing the plugin by downloading it via the normal npm route.

Please try the following project to see if you can reproduce the error I'm seeing (an extremely simple gulp-svg-symbols test project):

https://www.dropbox.com/s/t8v4pm90nuytf1w/svg-test.zip?dl=0

[olivertappin]

An update for you, there seems to be a breaking change between what's in the repository on GitHub and the files downloaded from npm. If I use that Dropbox link above and use npm install and run gulp, it fails. If I go into node_modules and replace the gulp-svg-sprites directory with the contents of the GitHub repository, it works successfully.

I'll post a quick diff between the GitHub and npm files, but the only change I can see it in the package.json file, which is expected but could contain breaking changes.

[olivertappin]

➜  ~ git:(master) ✗ diff ~/Desktop/gulp-svg-symbols-git ~/Desktop/gulp-svg-symbols-npm
Binary files /Users/oliver/Desktop/gulp-svg-symbols-git/.DS_Store and /Users/oliver/Desktop/gulp-svg-symbols-npm/.DS_Store differ
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: .git
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: .gitignore
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: .jshintrc
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: .travis.yml
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: examples
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: gulpfile.js
Common subdirectories: /Users/oliver/Desktop/gulp-svg-symbols-git/lib and /Users/oliver/Desktop/gulp-svg-symbols-npm/lib
Common subdirectories: /Users/oliver/Desktop/gulp-svg-symbols-git/node_modules and /Users/oliver/Desktop/gulp-svg-symbols-npm/node_modules
diff /Users/oliver/Desktop/gulp-svg-symbols-git/package.json /Users/oliver/Desktop/gulp-svg-symbols-npm/package.json
2,8c2,23
<   "name": "gulp-svg-symbols",
<   "version": "2.0.0",
<   "description": "Convert SVG files to symbols with gulp",
<   "main": "index.js",
<   "scripts": {
<     "hint": "gulp hint",
<     "test": "gulp test"
---
>   "_args": [
>     [
>       {
>         "raw": "gulp-svg-symbols@^2.0.0",
>         "scope": null,
>         "escapedName": "gulp-svg-symbols",
>         "name": "gulp-svg-symbols",
>         "rawSpec": "^2.0.0",
>         "spec": ">=2.0.0 <3.0.0",
>         "type": "range"
>       },
>       "/Users/oliver/Desktop/gulp-svg-symbols copy/examples"
>     ]
>   ],
>   "_from": "gulp-svg-symbols@>=2.0.0 <3.0.0",
>   "_id": "gulp-svg-symbols@2.0.0",
>   "_inCache": true,
>   "_location": "/gulp-svg-symbols",
>   "_nodeVersion": "5.12.0",
>   "_npmOperationalInternal": {
>     "host": "packages-12-west.internal.npmjs.com",
>     "tmp": "tmp/gulp-svg-symbols-2.0.0.tgz_1471327010644_0.9101686726789922"
10,12c25,27
<   "repository": {
<     "type": "git",
<     "url": "https://github.com/Hiswe/gulp-svg-symbols.git"
---
>   "_npmUser": {
>     "name": "hiswe",
>     "email": "hiswehalya@gmail.com"
14,17c29,41
<   "keywords": [
<     "gulpplugin",
<     "svg",
<     "symbols"
---
>   "_npmVersion": "3.8.6",
>   "_phantomChildren": {},
>   "_requested": {
>     "raw": "gulp-svg-symbols@^2.0.0",
>     "scope": null,
>     "escapedName": "gulp-svg-symbols",
>     "name": "gulp-svg-symbols",
>     "rawSpec": "^2.0.0",
>     "spec": ">=2.0.0 <3.0.0",
>     "type": "range"
>   },
>   "_requiredBy": [
>     "/"
18a43,47
>   "_resolved": "https://registry.npmjs.org/gulp-svg-symbols/-/gulp-svg-symbols-2.0.0.tgz",
>   "_shasum": "91feacc3598613c729acac313a03bb292fa5b4c1",
>   "_shrinkwrap": null,
>   "_spec": "gulp-svg-symbols@^2.0.0",
>   "_where": "/Users/oliver/Desktop/gulp-svg-symbols copy/examples",
24d52
<   "license": "WTFPL",
28d55
<   "homepage": "https://github.com/Hiswe/gulp-svg-symbols",
37a65
>   "description": "Convert SVG files to symbols with gulp",
48c76,108
<   }
---
>   },
>   "directories": {},
>   "dist": {
>     "shasum": "91feacc3598613c729acac313a03bb292fa5b4c1",
>     "tarball": "https://registry.npmjs.org/gulp-svg-symbols/-/gulp-svg-symbols-2.0.0.tgz"
>   },
>   "gitHead": "a03d3f084bed35a2e050db4ed1c8e6d793e47cba",
>   "homepage": "https://github.com/Hiswe/gulp-svg-symbols",
>   "keywords": [
>     "gulpplugin",
>     "svg",
>     "symbols"
>   ],
>   "license": "WTFPL",
>   "main": "index.js",
>   "maintainers": [
>     {
>       "name": "hiswe",
>       "email": "hiswehalya@gmail.com"
>     }
>   ],
>   "name": "gulp-svg-symbols",
>   "optionalDependencies": {},
>   "readme": "ERROR: No README data found!",
>   "repository": {
>     "type": "git",
>     "url": "git+https://github.com/Hiswe/gulp-svg-symbols.git"
>   },
>   "scripts": {
>     "hint": "gulp hint",
>     "test": "gulp test"
>   },
>   "version": "2.0.0"
Common subdirectories: /Users/oliver/Desktop/gulp-svg-symbols-git/templates and /Users/oliver/Desktop/gulp-svg-symbols-npm/templates
Only in /Users/oliver/Desktop/gulp-svg-symbols-git: test

[Jamiewarb]

I'm also having this issue, with the same outcomes as @olivertappin has posted above. Would very much appreciate a solution! Thanks

[Hiswe]

@olivertappin @Jamiewarb is installing with npm install hiswe/gulp-svg-symbols solving the issue?

@olivertappin I will update the example folder to have a better “real” use case

[olivertappin]

Installing with npm install hiswe/gulp-svg-symbols does indeed solve the issue, which does suggest there's inconsistencies within the npm repository.

Are you able to replicate this error your side with my Dropbox example?

[Hiswe]

@olivertappin @Jamiewarb I've updated the npm package. It should be working now

Thanks again for the feedback :)

[Jamiewarb]

Thank you for the timely fix!

[Hiswe]

You're welcome.

Please close the issue if everything's fine :)

[olivertappin]

Works great, thank you!

[olivertappin]

Unfortunately I'm experiencing this issue again:

➜  svg-test gulp
[17:05:12] Using gulpfile /var/www/svg-test/gulpfile.js
[17:05:12] Starting 'default'...
Unhandled rejection TypeError: tmpl is not a function
    at /var/www/svg-test/node_modules/consolidate/lib/consolidate.js:779:16
    at /var/www/svg-test/node_modules/consolidate/lib/consolidate.js:143:5
    at Promise._execute (/var/www/svg-test/node_modules/bluebird/js/release/debuggability.js:299:9)
    at Promise._resolveFromExecutor (/var/www/svg-test/node_modules/bluebird/js/release/promise.js:481:18)
    at new Promise (/var/www/svg-test/node_modules/bluebird/js/release/promise.js:77:14)
    at promisify (/var/www/svg-test/node_modules/consolidate/lib/consolidate.js:136:10)
    at Function.exports.lodash.render (/var/www/svg-test/node_modules/consolidate/lib/consolidate.js:775:10)
    at /var/www/svg-test/node_modules/consolidate/lib/consolidate.js:164:27
    at /var/www/svg-test/node_modules/consolidate/lib/consolidate.js:98:5
    at tryToString (fs.js:455:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)

➜  svg-test node -v
v6.9.1
➜  svg-test npm -v
3.10.8
➜  svg-test gulp -v
[17:05:22] CLI version 3.9.1
[17:05:22] Local version 3.9.1
➜  svg-test uname -v   
#62~14.04.1-Ubuntu SMP Fri Oct 7 23:15:48 UTC 2016

I have also tried installing with npm install hiswe/gulp-svg-symbols with no luck. Wondering if consolidate or other dependencies that rely on consolidate have updated recently to cause this error.

Please find attached test file to replicate the error: svg-test.tar.gz

In case the file above expires, here's the file contents for reference:

gulpfile.js

var gulp          = require('gulp');
var svgsymbols    = require('gulp-svg-symbols');

gulp.task('default', function () {
  return gulp.src('assetes/*.svg')
    .pipe(svgsymbols())
    .pipe(gulp.dest('build'));
});

package.json

{
  "name": "svg-test",
  "repository": "git@github.com:olivertappin/svg-test.git",
  "version": "1.0.0",
  "description": "The default gulp file to handle SVG symbol generation using the gulp-svg-symbols plugin",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-svg-symbols": "^2.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Oliver Tappin",
  "license": "ISC"
}

assets/test.svg (or any valid SVG file)

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 44">
    <defs>
        <style>.cls-1{fill:#01e3bc;}</style>
    </defs>
    <title>test</title>
    <path class="cls-1" d="M150.369,39.349A4.629,4.629,0,1,1,145.74,34.7,4.8,4.8,0,0,1,150.369,39.349Zm-3.878-9.3c0.5-6.348,1.063-12.7,1.5-19.045,0.25-3.709.688-11,5.692-11,3,0,4.316,1.823,4.316,4.526,0,4.211-8.069,20.3-9.945,25.771Z" />
    <rect class="cls-1" y="3.663" width="8.209" height="38.66" rx="1.936" ry="1.936" />
    <rect class="cls-1" x="28.969" y="3.663" width="8.209" height="38.66" rx="1.936" ry="1.936" />
    <rect class="cls-1" x="13.883" y="6.185" width="7.764" height="33.971" rx="1.936" ry="1.936" transform="translate(40.936 5.405) rotate(90)" />
    <rect class="cls-1" x="62.066" y="2.973" width="7.279" height="40.046" rx="1.936" ry="1.936" transform="translate(88.701 -42.71) rotate(90)" />
    <path class="cls-1" d="M92.833,6.6l3.073-3.088a1.931,1.931,0,0,1,2.732,0L131.6,36.63a1.953,1.953,0,0,1,0,2.745l-3.073,3.088a1.931,1.931,0,0,1-2.732,0L92.833,9.345A1.953,1.953,0,0,1,92.833,6.6Z" />
    <rect class="cls-1" x="62.066" y="-12.002" width="7.279" height="40.046" rx="1.936" ry="1.936" transform="translate(73.727 -57.685) rotate(90)" />
    <rect class="cls-1" x="62.066" y="17.948" width="7.279" height="40.046" rx="1.936" ry="1.936" transform="translate(103.676 -27.735) rotate(90)" />
    <path class="cls-1" d="M128.506,3.527l3.073,3.088a1.953,1.953,0,0,1,0,2.745L98.654,42.446a1.931,1.931,0,0,1-2.732,0l-3.073-3.088a1.953,1.953,0,0,1,0-2.745L125.775,3.527A1.931,1.931,0,0,1,128.506,3.527Z" />
</svg>

Once this issue is sorted, I will be sure to create a npm-shrinkwrap.json file!

[olivertappin]

Just a note, this can be replicated by cloning this repository and running:

cd examples
npm install
gulp svg

For some reason the task list is running but not showing any errors. When a task is called directly, the error can be recreated:

➜  examples git:(master) gulp
[15:41:39] Using gulpfile /var/www/gulp-svg-symbols/examples/gulpfile.js
[15:41:39] Starting 'task-list'...
 Task name         Description                                                                      Dependencies 
 task-list                                                                                                       
 default                                                                                            task-list    
 svg                default options output                                                                       
 demo-page          adding the demo page                                                                         
 svg-classname      add a class name to the outputed SVG in case of SVG being included in the DOM                
 custom-template    custom templates & files in different folders                                                
 aspect-ratio       custom template to test aspect ratio                                                         
[15:41:39] Finished 'task-list' after 4.26 ms
[15:41:39] Starting 'default'...
[15:41:39] Finished 'default' after 7.86 μs

➜  examples git:(master) gulp svg
[15:41:42] Using gulpfile /var/www/gulp-svg-symbols/examples/gulpfile.js
[15:41:42] Starting 'svg'...
[15:41:42] gulp-svg-symbols viewbox missing in file /var/www/gulp-svg-symbols/test/source/gradient.svg
Unhandled rejection TypeError: tmpl is not a function
    at /var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:779:16
    at /var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:143:5
    at Promise._execute (/var/www/gulp-svg-symbols/examples/node_modules/bluebird/js/release/debuggability.js:299:9)
    at Promise._resolveFromExecutor (/var/www/gulp-svg-symbols/examples/node_modules/bluebird/js/release/promise.js:481:18)
    at new Promise (/var/www/gulp-svg-symbols/examples/node_modules/bluebird/js/release/promise.js:77:14)
    at promisify (/var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:136:10)
    at Function.exports.lodash.render (/var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:775:10)
    at /var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:164:27
    at /var/www/gulp-svg-symbols/examples/node_modules/consolidate/lib/consolidate.js:98:5
    at tryToString (fs.js:455:3)
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)

[Hiswe]

@olivertappin thanks again. Should finally been fixed in 2.0.2

I finally followed your first advice and make the same update as in gulp-wrap… I still don't understand why it wasn't breaking in the test.

Close if it's working :)

[olivertappin]

Perfect, thank you very much! All working as expected.