TypeError: $svg.contents is not a function

[Michael Pumo]

Hi,

Today we realised our Gulp SVG task was failing, seemingly due to some issue with gulp-svgstore. How long this has been happening we can't say, but there was a time it was working. Could it be an issue with the latest version of Node?

We get the following error:

/Applications/MAMP/htdocs/raggededge/wp-content/themes/raggededge/node_modules/gulp-svgstore/index.js:111
$symbol.append($svg.contents())
^

TypeError: $svg.contents is not a function
at Transform.transform as _transform
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:292:12)
at writeOrBuffer (_stream_writable.js:278:5)
at Transform.Writable.write (_stream_writable.js:207:11)
at Transform.ondata (_stream_readable.js:529:20)
at emitOne (events.js:90:13)
at Transform.emit (events.js:182:7)
at readableAddChunk (_stream_readable.js:147:16)

Our task looks like:

'use strict';

module.exports = function(gulp, plugins) {

    return function() {

        gulp.src('src/svg/*.svg')

            .pipe(plugins.svgmin({
                plugins: [
                    {
                        removeViewBox: false
                    }
                ]
            }))
            .pipe(plugins.svgstore())
            .pipe(plugins.rename('sprite.svg'))
            .pipe(gulp.dest('dist/svg/'))
            .pipe(plugins.browserSync.reload({
                stream: true
            }));

    };

};

This task hasn't changed and the plugin versions have not changed either:

"gulp-svgstore": "^5.0.5"

Our Node version is:

node/5.6.0

Although we're using gulp-svgmin, removing this still shows the error, so we're pretty confident the issue lies with gulp-svgstore.

Any help would be greatly appreciated!

Thanks,
Michael

[Nayara Hilton]

I have the same problem =(

[Andrey Kuzmin]

@michaelpumo thanks for the report, I will check it this week.

[Andrey Kuzmin]

@michaelpumo @nayarahilton I've tried it with the 5.6.0 node and it worked, can you please set up a minimal test case that reproduces the issue?

[Andrey Kuzmin]

@michaelpumo @nayarahilton is this still an issue for you or may I close this as "can't reproduce"?

[Nayara Hilton]

This still is an issue for me, I'm using 5.7.0 node =/

[Andrey Kuzmin]

@nayarahilton this is not enough info for me, as I have mentioned earlier, if you need help, please set up a test case that triggers the error.

[Nayara Hilton]

sorry, I'm new here and my problem is similar to him, that's why I do not set up a test case

task:

gulp.task('sprite', function () {
    return gulp
        .src('./icons/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]  
            }
        }))
        .pipe(svgstore())        
        .pipe(gulp.dest('./img/'));
});

error:

Z:\gulp\node_modules\gulp-svgstore\index.js:107
$combinedDefs.append($defs.contents())
^

TypeError: $defs.contents is not a function
at Transform.transform [as _transform](Z:gulpnode_modulesgulp-svgstorei
ndex.js:107:34)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:301:12)
at writeOrBuffer (_stream_writable.js:287:5)
at Transform.Writable.write (_stream_writable.js:215:11)
at Transform.ondata (_stream_readable.js:536:20)
at emitOne (events.js:90:13)
at Transform.emit (events.js:182:7)
at readableAddChunk (_stream_readable.js:153:18)

sorry again

[Andrey Kuzmin]

@nayarahilton but he doesn't set up the test case either. Sorry for confusion, by "the test case" I mean the whole project on github or in a zip archive, that reproduces the issue.

[Andrey Kuzmin]

Closing as can't reproduce.

Will reopen this issue if somebody uploads a test project that fails with this error.

[Michael Pumo]

I'll try and get an isolated test case over in the next few days. Apologies for the delay.

[Andrey Kuzmin]

@michaelpumo and @nayarahilton, I tried your tasks with the exact versions and it worked for me, maybe the problem is in the svg files that you're bundling. Maybe try to remove all svg files and then keep adding them one by one until it breaks.

[Michael Pumo]

@w0rm I thought perhaps the same, but I tried eliminating each one by one. No success. I'll get an example to you as soon as I can. Should I place this in a repo? Thanks!

[Andrey Kuzmin]

@michaelpumo any way will work, you can even try to attach a zip file here or email it to [e-mail]

[Piotr]

Have same problem.
NodeJS: 5.10.0
NPM: 3.8.5
gulp-svgstore: 6.0.0

This error happens even if you use simple:
gulp.task('svgstore', function () {
return gulp
.src('app/assets/svg/*.svg')
.pipe($.svgstore())
.pipe(gulp.dest('out'));
});

I'm fixing it when I remove node_modules folder and all package.json dependencies, and then install it one by one again. Didn't know why it works.

[Amie Wilt]

Same problem.
NodeJS: 5.7.1
NPM: 3.10.8
gulp-svgstore: 6.1.0

I fixed it by deleting node_modules as @namerci suggested.

[Jeffrey Jorgensen]

I'm experiencing this same issue. I've emailed [e-mail] with a .zip file of the project.

[Ruben Oliveira]

I had the same problem and I noticed there is a dependence to cheerio. After checking the installed cheerio I noticed only cheerio-select was installed. Since the error was about a missing method (the contents()) I decided to install cheerio (npm install cheerio) and the error was solved.

npm: 3.10.10
node: v6.10.1
gulp-svgstore: 6.1.0

[Alexsnd]

thnx, ramaralo! it's work!

[Vitalii Rybka]

Hi @ramaralo,

I would like to say very big THANKS to you. Your comment has helped me to save a lot of hours of googling to try to figure out what's going on.

Cheers ;)