angular-masonry
angular-masonry copied to clipboard
passy
TypeError: element.masonry is not a function
Error Occurred while including angular-masonry in our App
TypeError: element.masonry is not a function at preLink (http://192.168.1.171:8100/js/directive.js:3965:29) at invokeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:17477:9) at nodeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16956:11) at compositeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16368:13) at compositeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16372:13) at nodeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16972:24) at compositeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16368:13) at compositeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16372:13) at nodeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16972:24) at compositeLinkFn (http://192.168.1.171:8100/lib/ionic/js/ionic.bundle.js:16368:13)
When we are trying to add jquery library file in index.html before ionic.bundle.js following error occurred....but when we put it down after ionic.bundle.js above error occurred..
ReferenceError: it is not defined
at eval (eval at
Please help us to resolve this problem... Thanks in advance.
Still facing same issue
ReferenceError: it is not defined
at eval (eval at
Please help
Same error in my implementation. Dependencies are all in the right order. element.masonry() is not a function.
Hello I have a same problem. I'm using Ionic. Is there other way when you use Ionic?
Thanks
I got it working by adding the following to the overrides section in the bower.json file.
"ev-emitter": {
"dependencies": {
"jquery-bridget": "~2.0.0"
}
},
"outlayer": {
"main": [
"item.js",
"outlayer.js"
]
}
the solution @JoshuaNovak919 provided works for me. It only works if jquery-bridget.js is loaded before ev-emitter.js :)
If FIXED it including Jquery dependency (jquery/dist/jquery.js) before ionic's bundle file (ionic/js/ionic.bundle.js):
<!-- jquery -->
<script src="lib/jquery/dist/jquery.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
@JoshuaNovak919 which bower.json? where... please I have this issue too.
@victorsosa The main project bower.json file. It should look something like this:
{
"name": "MyApp",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-material": "master",
"ngmap": "~1.16.7",
"jquery": "~2.2.0",
"ngMask": "angular-mask#~3.0.16",
"ng-page-title": "~1.1.1",
"angular-filter": "~0.5.8",
"angular-masonry": "~0.16.0",
"lightgallery": "~1.2.14",
"components-font-awesome": "~4.5.0",
"animate.css": "~3.5.1"
},
"devDependencies": {
"angular-mocks": "^1.4.0",
"angular-material": "~1.0.2"
},
"appPath": "app",
"moduleName": "MyApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
},
"ev-emitter": {
"dependencies": {
"jquery-bridget": "~2.0.0"
}
},
"outlayer": {
"main": [
"item.js",
"outlayer.js"
]
}
}
}
If anyone working with webpack, that's what I had to require in order for it to work:
require('jquery');
require('jquery-bridget');
require('ev-emitter');
require('desandro-matches-selector');
require('fizzy-ui-utils');
require('get-size');
require('masonry-layout');
then in my app:
var app = angular.module('app', [
(require('angular-masonry'), 'wu.masonry'),
]);
In case it helps someone...I had to add references to jquery and jquery-bridget for this to work. I didn't see that explicitly documented anywhere. I'm on angular 1.6.2
As a clarification, I am trying to do
import 'angular-masonry' and its dependencies but getting this error.
I have tried to split this out into its own vendor file as well to have it load first, but still nothing working just yet.
@lucas-garcia just curious was there anything else you had to do in your webpack config. Thanks!
Just figured this out.
It looks like the src file in this directory is much newer than the packaged up lib with npm I just had to alias the angular-masonry to the src and then utilize the import-loader to include masonry and imagesloaded to get this going.
since we are no longer pointing to index.js in the package we have to export wu.masonry manually in the webpack config.
{
test: require.resolve('angular-masonry/src/angular-masonry.js'),
use:{
loader: 'exports-loader',
options: '"wu.masonry"'
}
},
{
test: require.resolve('angular-masonry/src/angular-masonry.js'),
use: "imports-loader?Masonry=masonry-layout,imagesLoaded=imagesloaded"
}
alias (not necessarily needed as you could do this in the import as well, but just for ease I do it:
alias:{
'angular-masonry': 'angular-masonry/src/angular-masonry'
},
Then simply do this import:
import wuMasonry from 'angular-masonry'