Uncaught TypeError: Cannot read property 'EventEmitter' of undefined
osapishchuk opened this issue · comments
app.js:10053 Uncaught TypeError: Cannot read property 'EventEmitter' of undefined at app.js:10053 at Object.90 (app.js:10225) at s (app.js:1) at app.js:1 at $ (app.js:1924) at Object.72.eventie (app.js:1925) at s (app.js:1) at app.js:1 at Object.7../ajax (app.js:123) at s (app.js:1)
Using gulp in SiteGenesis I've got this error in console while open page
I had the same issue, you are probably requiring the library only, and not it's dependencies. You can use a dependency manager or include the .pkgd.js file
I don't do anything. It's just working on macos and not working on windows.
Problem is that I have imagesloaded in dependencies and I have of course wolfy87-eventemitter in node_modules/imagesloaded/imagesloaded.pkgd.min.js
this is my global package json:
{
"name": "savannahs",
"version": "0.0.1",
"description": "Savannahs",
"main": "cartridges/app_savannahs_core/cartridge/js/app.js",
"dependencies": {
"browserify": "^14.3.0",
"clipboard": "^1.6.1",
"grunt": "^1.0.1",
"gulp": "^3.9.1",
"gulp-es6-transpiler": "^1.0.1",
"gulp-uglifyjs": "^0.6.2",
"imagesloaded": "^3.2.0",
"lodash": "^3.10.1",
"masonry-layout": "^4.2.0",
"owl.carousel": "^2.2.0",
"promise": "^7.0.4"
},
"devDependencies": {
"@tridnguyen/config": "^2.3.1",
"@tridnguyen/version": "^1.0.0",
"ampersand-model": "^6.0.2",
"ampersand-view": "^9.0.0",
"async": "^2.0.1",
"babel-core": "^6.1.2",
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^14.3.0",
"chai": "^3.4.0",
"chalk": "^1.1.3",
"cldr-data": "^28.0.3",
"cookies-js": "^1.2.3",
"dwupload": "^3.8.0",
"eslint": "^1.10.3",
"event-stream": "^3.3.4",
"exorcist": "^0.4.0",
"gaze": "^1.1.1",
"glob": "^7.0.6",
"globalize": "^1.1.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.1",
"gulp-browserify": "^0.5.1",
"gulp-clean-css": "^3.0.4",
"gulp-connect": "^2.2.0",
"gulp-eslint": "^1.1.1",
"gulp-gh-pages": "^0.5.4",
"gulp-if": "^2.0.0",
"gulp-mocha": "^2.1.3",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-scss-lint": "^0.4.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"gulp-webdriver": "^1.0.2",
"handlebars": "^4.0.4",
"hbsfy": "^2.4.1",
"http-server": "^0.9.0",
"istanbul": "next",
"jsdoc": "^3.4.0",
"jshint-stylish": "^2.0.1",
"load-grunt-tasks": "^3.3.0",
"merge-stream": "^1.0.0",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"moment-timezone": "^0.4.1",
"node-sass": "^3.8.0",
"phantomjs": "^1.9.18",
"postcss-cli": "^2.5.1",
"properties-parser": "^0.3.0",
"proxyquire": "^1.7.3",
"q": "^1.4.1",
"require-inject": "^1.3.0",
"sass-graph": "^2.1.2",
"sinon": "^1.17.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vinyl-transform": "^1.0.0",
"watchify": "^3.6.0",
"webdriverio": "^3.3.0",
"xml2js": "^0.4.15"
},
"scripts": {
"test:unit": "node bin/test.js",
"test:application": "wdio test/application/webdriver/wdio.conf.js",
"test:application:docker": "sh bin/test-application-docker.sh",
"lint": "eslint .",
"css": "node bin/css.js",
"js": "node bin/js.js",
"build": "npm run js && npm run css",
"build:watch": "npm run js -- -w & npm run css -- -w",
"preversion": "version > old_version",
"version": "node bin/version.js && rm old_version && git add .",
"doc": "sh bin/doc.sh"
},
"repository": {
"type": "git",
"url": "git+ssh://git@bitbucket.org/demandware/sitegenesis.git"
},
"author": "Tri Nguyen",
"license": "ISC",
"paths": {
"css": [
{
"src": "cartridges/app_savannahs_core/cartridge/scss/default/",
"dest": "cartridges/app_savannahs_core/cartridge/static/default/css/"
}
],
"js": [
{
"src": "cartridges/app_savannahs_core/cartridge/js/",
"dest": "cartridges/app_savannahs_core/cartridge/static/default/js/"
}
],
"images": "cartridges/app_savannahs_core/cartridge/static/default/images/"
},
"homepage": "https://bitbucket.org/demandware/sitegenesis#readme"
}
and this is how I use it in file:
'use strict';
var ajax = require('./ajax'),
util = require('./util'),
_ = require('lodash'),
imagesLoaded = require('imagesloaded');
var dialog = {
/**
* @function
* @description Appends a dialog to a given container (target)
* @param {Object} params params.target can be an id selector or an jquery object
*/
create: function (params) {
var $target, id;
if (_.isString(params.target)) {
if (params.target.charAt(0) === '#') {
$target = $(params.target);
} else {
$target = $('#' + params.target);
}
} else if (params.target instanceof jQuery) {
$target = params.target;
} else {
$target = $('#dialog-container');
}
// if no element found, create one
if ($target.length === 0) {
if ($target.selector && $target.selector.charAt(0) === '#') {
id = $target.selector.substr(1);
$target = $('<div>').attr('id', id).addClass('dialog-content').appendTo('body');
}
}
// create the dialog
this.$container = $target;
this.$container.dialog(_.merge({}, this.settings, params.options || {}));
},
/**
* @function
* @description Opens a dialog using the given url (params.url) or html (params.html)
* @param {Object} params
* @param {Object} params.url should contain the url
* @param {String} params.html contains the html of the dialog content
*/
open: function (params) {
// close any open dialog
this.close();
this.create(params);
this.replace(params);
},
/**
* @description populate the dialog with html content, then open it
**/
openWithContent: function (params) {
var content, position, callback;
if (!this.$container) { return; }
content = params.content || params.html;
if (!content) { return; }
this.$container.empty().html(content);
if (!this.$container.dialog('isOpen')) {
this.$container.dialog('open');
}
if (params.options) {
position = params.options.position;
}
if (!position) {
position = this.settings.position;
}
imagesLoaded(this.$container).on('done', function () {
this.$container.dialog('option', 'position', position);
}.bind(this));
callback = (typeof params.callback === 'function') ? params.callback : function () {};
callback();
},
/**
* @description Replace the content of current dialog
* @param {object} params
* @param {string} params.url - If the url property is provided, an ajax call is performed to get the content to replace
* @param {string} params.html - If no url property is provided, use html provided to replace
*/
replace: function (params) {
if (!this.$container) {
return;
}
if (params.url) {
params.url = util.appendParamToURL(params.url, 'format', 'ajax');
ajax.load({
url: params.url,
data: params.data,
callback: function (response) {
params.content = response;
this.openWithContent(params);
}.bind(this)
});
} else if (params.html) {
this.openWithContent(params);
}
},
/**
* @function
* @description Closes the dialog
*/
close: function () {
if (!this.$container) {
return;
}
this.$container.dialog('close');
},
exists: function () {
return this.$container && (this.$container.length > 0);
},
isActive: function () {
return this.exists() && (this.$container.children.length > 0);
},
settings: {
autoOpen: false,
height: 'auto',
modal: true,
overlay: {
opacity: 0.5,
background: 'black'
},
resizable: false,
title: '',
width: '800',
close: function () {
$(this).dialog('close');
},
position: {
my: 'center',
at: 'center',
of: window,
collision: 'flipfit'
}
}
};
module.exports = dialog;
and in another one:
'use strict';
var imagesLoaded = require('imagesloaded'),
Masonry = require('masonry-layout');
function gridViewToggle() {
$('.toggle-grid').on('click', function () {
$('.search-result-content').toggleClass('wide-tiles');
$(this).toggleClass('wide');
});
}
/**
* @private
* @function
* @description Initializes events on the product-tile for the following elements:
* - swatches
* - thumbnails
*/
function initializeEvents() {
// initQuickViewButtons();
gridViewToggle();
$('.swatch-list').on('mouseleave', function () {
// Restore current thumb image
var $tile = $(this).closest('.product-tile'),
$thumb = $tile.find('.product-image .thumb-link img').eq(0),
data = $thumb.data('current');
$thumb.attr({
src: data.src,
alt: data.alt,
title: data.title
});
});
$('.swatch-list .swatch').on('click', function (e) {
e.preventDefault();
if ($(this).hasClass('selected')) { return; }
var $tile = $(this).closest('.product-tile');
$(this).closest('.swatch-list').find('.swatch.selected').removeClass('selected');
$(this).addClass('selected');
$tile.find('.thumb-link').attr('href', $(this).attr('href'));
$tile.find('name-link').attr('href', $(this).attr('href'));
var data = $(this).children('img').filter(':first').data('thumb');
var $thumb = $tile.find('.product-image .thumb-link img').eq(0);
var currentAttrs = {
src: data.src,
alt: data.alt,
title: data.title
};
$thumb.attr(currentAttrs);
$thumb.data('current', currentAttrs);
}).on('mouseenter', function () {
// get current thumb details
var $tile = $(this).closest('.product-tile'),
$thumb = $tile.find('.product-image .thumb-link img').eq(0),
data = $(this).children('img').filter(':first').data('thumb'),
current = $thumb.data('current');
// If this is the first time, then record the current img
if (!current) {
$thumb.data('current', {
src: $thumb[0].src,
alt: $thumb[0].alt,
title: $thumb[0].title
});
}
// Set the tile image to the values provided on the swatch data attributes
$thumb.attr({
src: data.src,
alt: data.alt,
title: data.title
});
});
}
function initMasonry() {
var msnry = new Masonry('.search-result-items', {
itemSelector: '.grid-tile',
columnWidth: '.grid-sizer',
percentPosition: true,
transitionDuration: 0
});
$(document).on('grid-resize', function() {
msnry.layout();
});
}
exports.init = function () {
var $tiles = $('.tiles-container .product-tile');
if ($tiles.length === 0) { return; }
// imagesLoaded('.tiles-container').on('done', function () {
// $tiles.syncHeight()
// .each(function (idx) {
// $(this).data('idx', idx);
// });
// });
initializeEvents();
initMasonry();
};
I'm sorry to see you're having trouble with imagesLoaded. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.
@desandro I can't... but I know that it's related to this -> rxaviers/cldrjs#54
imagesLoaded and Isotope both use ev-emitter, no longer EventEmitter. I'm not sure if this is related.
maybe this is issue on our end "_from": "imagesloaded@>=3.2.0 <4.0.0", ?
solution was to update version of imagesloaded to latest one:
from:
"imagesloaded": "^3.2.0",
to:
"imagesloaded": "^4.1.3",