SyntaxError: Unexpected end of input error using Gulp and main-bower-files package

Question

I keep getting an error trying to inject the main bower files into my build folder index.html

I am using the main-bower-files NPM package.

My code looks like this:

//requires
var gulp = require('gulp');
var inject = require('gulp-inject');
var config = require('./gulp-config');
var mainBowerFiles = require('main-bower-files');

gulp.task('default', ['move'], function() {
  return gulp
    .src(config.buildFolder + config.indexFile)
    .pipe(
  inject(
    gulp.src( mainBowerFiles()  ), {base: './bower_components'}
    )
  )
.pipe(gulp.dest(config.buildFolder));
});

gulp.task('move', function() {
  return gulp
    .src(config.indexFile)
    .pipe(gulp.dest(config.buildFolder));
});

which gives me the following error

SyntaxError: Unexpected end of input 

Answer 1

So this one really bugged me (I was peeking under the hood at the NPM package code to see if there really was an unexpected end of input error, but the error was my fault).

The problem is in my file structure, I had an empty .bowerrc file that I generated from the terminal by typing $ touch .bowerrc. Just add

{
    "directory": "(your bower components folder here as valid JSON)"
}

and... the error is gone! hope this saves someone else as much trouble as it caused me.