Gulp 4: TypeError: undefined is not a function when passing array inside array

[demisx]

$ gulp -v
[10:23:57] CLI version 0.4.0
[10:23:57] Local version 4.0.0-alpha.1

We have a watch:code task defined like this:

var paths = {
  html: ['app/**/*.shtml', 'app/**/*.html'],
  js: 'app/**/*.js',
  images: 'app/**/*.{JPG,jpg,png,gif}',
  json: 'app/**/*.json',
  ... ... ...
}

gulp.task('watch:code', function () {
  gulp.watch([
    paths.html,
    paths.js,
    paths.images,
    paths.json
    ], gulp.series('build', browserSync.reload));
});

Running this task generates this error now:

[10:21:25] Starting 'watch:code'...
[10:21:25] 'watch:code' errored after 3.53 ms
[10:21:25] TypeError: undefined is not a function
    at EventEmitter.FSWatcher._getWatchHelpers (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/node_modules/chokidar/index.js:241:15)
    at EventEmitter.FsEventsHandler._addToFsEvents (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/node_modules/chokidar/lib/fsevents-handler.js:292:17)
    at Array.forEach (native)
    at EventEmitter.FSWatcher.add (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/node_modules/chokidar/index.js:420:11)
    at Object.exports.watch (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/node_modules/chokidar/index.js:508:33)
    at Gulp.watch (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/index.js:38:26)
    at /Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/gulpfile.js:242:8
    at bound (domain.js:254:14)
    at runBound (domain.js:267:12)
    at asyncRunner (/Users/dmoore/projects/amgen-sites/sensiparhcp-com-templates/node_modules/gulp/node_modules/undertaker/node_modules/bach/node_modules/async-done/index.js:38:18)

The error seems to happen when passing an array of paths to the gulp.watch() function when one or more of those paths is also an array.

[demisx]

Adding @es128 as it seems to be chokidar related again.

[es128]

Dupe of paulmillr/chokidar#360

Chokidar does not currently flatten arrays for you - input is expected to be a string or one-dimensional array of strings.

But we could change that pretty easily if this use-case is common (as it is beginning to appear to be).

[phated]

I don't like supporting nested arrays

[demisx]

This is a very common use case for our team and please note it just started to fail. It worked fine last week.

[yocontra]

meh I don't think there is a problem with flattening it, do you @phated?

[phated]

@demisx relying on undocumented features will cause that to happen. Use _.flatten to flatten your arrays.

[demisx]

@phated Sorry, didn't realize the nested arrays were an undocumented feature. Sure, I can do _.flatten, though would be nice if I didn't have to take this extra step. Are the "nested arrays" considered an anti-pattern/bad practice in Javascript?

[es128]

Are the "nested arrays" considered an anti-pattern/bad practice in Javascript?

Nah, just that it's going to need to be flattened somewhere along the way to be used like this, and nobody ever promised gulp would do it for you, even though it has been working up to this point.

Looks like we may be adding it to chokidar, though.

[demisx]

@es128 Gotcha. Totally understand not trying to fit every corner case. I thought this would be a pretty common pattern for the gulp usage, but I may be wrong.

Just for those, who come across this post looking for the immediate solution, here is what fixes it now:

var _ = require('lodash');
... ... ...
gulp.task('watch:code', function () {
  gulp.watch(_.flatten([
    paths.html,
    paths.js,
    paths.images,
    paths.json
  ], true), gulp.series('build', browserSync.reload));
});

[phated]

Bumped the version of chokidar in 7243d6e - should be able to use nested arrays now. Thanks @es128

[jitendravyas]

[14:29:48] CLI version 1.2.1
[14:29:48] Local version 4.0.0-alpha.2

I'm getting error with this

var gulp = require('gulp');
var posthtml = require('gulp-posthtml');
gulp.task('posthtml', function () {
    var plugins = [
        require('posthtml-alt-always')(),
        require('posthtml-include')({ encoding: 'utf-8' }),
        require('posthtml-lorem')(),
        require('posthtml-each')()
                      ];
    return gulp.src('*.html')
        .pipe(posthtml(plugins))
        .pipe(gulp.dest('./dest'));
});

Error

➜  posthtml gulp posthtml
[14:24:55] Using gulpfile ~/my-projects/posthtml/gulpfile.js
[14:24:55] Starting 'posthtml'...
[14:24:55] 'posthtml' errored after 55 ms
[14:24:55] TypeError in plugin 'gulp-posthtml'
Message:
    undefined is not a function
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false