Error: Cannot set property 'EvEmitter' of undefined in Foundation Framework including Handlebars templates and Sass/JS compilers

[shannonschaerer]

I don't think I can create a test case on code pen due to the nature of the situation. However... I am trying to include masonry with bower and can't get it to work for the life of me. I proceeded in the following way.

Include via bower:
bower install masonry --save

Bower.json overwritten with the following:

{
  "name": "foundation-ssg",
  "version": "1.0.0",
  "authors": [
    "ZURB <foundation@zurb.com>"
  ],
  "description": "Static site generator for Foundation for Sites.",
  "main": "gulpfile.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "foundation-sites": "~6.2.3",
    "motion-ui": "~1.2.2",
    "masonry": "^4.1.0"
  },
  "private": true
}

Updated config.yml with the line:

# Paths to your own project code are here
    - "bower_components/masonry/dist/masonry.pkgd.min.js"

I even tried to include an override in the bower.json file:

{
  "name": "foundation-ssg",
  "version": "1.0.0",
  "authors": [
    "ZURB <foundation@zurb.com>"
  ],
  "description": "Static site generator for Foundation for Sites.",
  "main": "gulpfile.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "foundation-sites": "~6.2.3",
    "motion-ui": "~1.2.2",
    "masonry": "^4.1.0",
    "OwlCarousel": "^1.3.2"
  },
  "overrides": {
    "masonry": {
      "main": "./dist/masonry.pkgd.min.js"
    }
  },
  "private": true
}

And added the following function to my gulpfile.babel.js:

gulp.task('bower', function () {
  var bowerOverrides = require('gulp-bower-overrides');

  return gulp.src('bower_components/*/bower.json')
    .pipe(bowerOverrides())
    .pipe(gulp.dest('dist'));
});

It appears that the pkgd.js is being retrieved as I can see it in the source code. I hope I'm not being a nuisance, but this issue is bugging me.

[desandro]

Sorry to hear you are having trouble with Masonry. There's a lot of things going on here that we'll have to sort out. I'm not clear on how you are using masonry.js in your build system. The gulp task will only move bower.json files into dist.

gulp.task('bower', function () {
  var bowerOverrides = require('gulp-bower-overrides');

  return gulp.src('bower_components/*/bower.json')
    .pipe(bowerOverrides())
    .pipe(gulp.dest('dist'));
});

Are you using another gulp task for Bower files?

[shannonschaerer]

Hello David

Thanks for your response. I got this gulp task from
https://www.npmjs.com/package/gulp-bower-overrides because I figured that
gulp was accessing masonry.js instead of masonry.pkgd.js. Honestly though,
I don't even know if that is the problem. There is a gulp file that comes
with the foundation install, I just add the task to it. I've attached the
gulpfile.

Thanks for your help!
Shannon

On Wed, Jul 27, 2016 at 3:47 PM David DeSandro notifications@github.com
wrote:

Sorry to hear you are having trouble with Masonry. There's a lot of things
going on here that we'll have to sort out. I'm not clear on how you are
using masonry.js in your build system. The gulp task will only move
bower.json files into dist.

gulp.task('bower', function () {
var bowerOverrides = require('gulp-bower-overrides');

return gulp.src('bower_components/*/bower.json')
.pipe(bowerOverrides())
.pipe(gulp.dest('dist'));
});

Are you using another gulp task for Bower files?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#880 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACVUdDRDcXfEjZA5X1hwkaxQxXw4yaesks5qZ2FcgaJpZM4JV87M
.

[desandro]

Unfortunately, attachments will not work with this GitHub issues thread, but you can paste in the code. See thread: #880

[shannonschaerer]

Okay, here is the code:

'use strict';
import plugins  from 'gulp-load-plugins';
import yargs    from 'yargs';
import browser  from 'browser-sync';
import gulp     from 'gulp';
import panini   from 'panini';
import rimraf   from 'rimraf';
import sherpa   from 'style-sherpa';
import yaml     from 'js-yaml';
import fs       from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();



gulp.task('bower', function () {
  var bowerOverrides = require('gulp-bower-overrides');

  return gulp.src('bower_components/*/bower.json')
    .pipe(bowerOverrides())
    .pipe(gulp.dest('dist'));
});

function loadConfig() {
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
  gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    .pipe(panini({
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    }))
    .pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
  panini.refresh();
  done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
  sherpa('src/styleguide/index.md', {
    output: PATHS.dist + '/styleguide.html',
    template: 'src/styleguide/template.html'
  }, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cssnano()))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin({
      progressive: true
    })))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist, port: PORT
  });
  done();
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**').on('change', gulp.series(styleGuide, browser.reload));
}

Babel is also in use. This is my first experience and I just threw that gulp task in hoping it would help. Ultimately I was just hoping everything would just work. I successfully installed Owl Carousel for example, so it does work, just not with Masonry.

[jrattue]

@desandro I have just encountered this error and think I have a solution.

I believe this is happening because the packaged file for masonry is using v1.0.2 of EvEmitter. see here

Can you rebuild the packaged files for masonry using v1.0.3 of EvEmitter and release a new version?

[jrattue]

@desandro Could you review this issue?

[desandro]

I've released Masonry v4.1.1 which updates EvEmitter to v1.0.3. Please check that this resolves this issue.