“TypeError: Cannot read property 'map' of undefined” when running Gulp

Question

I get an TypeError: Cannot read property 'map' of undefined error when I run gulp. I don't understand why, as I do have 4 .jsx files located in the src folder. I'm running node v6.11.0.

My files

$ find . | grep -v node_modules
.
./.node-version
./application.js
./Gulpfile.js
./index.html
./package.json
./src
./src/app.jsx
./src/badge.jsx
./src/thumbnail-list.jsx
./src/thumbnail.jsx

Gulpfile.js

var gulp   = require('gulp');
var react  = require('gulp-react');
var concat = require('concat');

gulp.task('default', function() {
  return gulp.src('./src')
    .pipe(react())
    .pipe(concat('application.js'))
    .pipe(gulp.dest('./'));
});

package.json

{
  "name": "thumbnail-gulp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browserify": "^9.0.3",
    "concat": "^1.0.3",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-react": "^3.1.0",
    "gulp-util": "^3.0.4",
    "react": "^0.13.3",
    "reactify": "^1.1.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^2.4.0"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

The error

➜  thumbnail-gulp node -v
v6.11.0
➜  thumbnail-gulp gulp
[09:49:31] Using gulpfile ~/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/gulpfile.js
[09:49:31] Starting 'default'...
[09:49:31] 'default' errored after 9.57 ms
[09:49:31] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/gulp-react/node_modules/readable-stream/lib/_stream_readable.js:556:8)
    at Gulp.<anonymous> (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/gulpfile.js:8:6)
    at module.exports (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:51:20
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/concat/index.js:17
        const fileList = files.map(f => path_1.join(folder, f));
                              ^

TypeError: Cannot read property 'map' of undefined
    at fs_1.readdir (/Users/martins/Work/LearnReact/ReactCasts-tasks/first-app/thumbnail-gulp/node_modules/concat/index.js:17:31)
    at FSReqWrap.oncomplete (fs.js:123:15)

Answer 1

Please use gulp-concat instead of concat :

var gulp   = require('gulp');
var react  = require('gulp-react');
var concat = require('gulp-concat');

gulp.task('default', function() {
  return gulp.src('./src/**/*.jsx')
    .pipe(react())
    .pipe(concat('application.js'))
    .pipe(gulp.dest('./'));
});