TypeError: undefined is not a function

passy / angular-masonry

An AngularJS directive for Masonry.

https://passy.github.io/angular-masonry

MIT License

1.12k stars 216 forks source link

TypeError: undefined is not a function #100

Closed beclamide closed 9 years ago

beclamide commented 9 years ago

I've just installed the Bower package and I'm getting a TypeError: undefined is not a function error in Chrome when the page loads.

I found that other people have had the error when scripts aren't loaded in the correct order, but I think I'm doing it right.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>

I've made sure jQuery is 2.1.1 too. Does anyone have any ideas?

passy commented 9 years ago

Turn on the debugger. The error message alone is very vague, I'm afraid. :)

beclamide commented 9 years ago

Thank for the reply, I've been banging my head against a wall with this for hours.

Here's the error I get in Chrome. I'm going through trying to work out where and why the errors are occuring.

TypeError: undefined is not a function
    at preLink (http://localhost:9000/bower_components/angular-masonry/angular-masonry.js:117:19)
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8141:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7632:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7009:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6888:30)
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1532:22
    at http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3905:9
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8141:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7653:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7009:13) <div masonry="" class="ng-scope">```

pmudahar commented 9 years ago

I'm getting the same error. In fact, the angular-masonry demo (http://www.directiv.es/angular-masonry) is giving the same error and is no longer working. I believe the demo here used to work.

Not sure what's going on.

beclamide commented 9 years ago

I believe it's something to do with the latest version of Masonry. I've got a deadline on a project so I've had to put this to one side for now, but I'll definitely investigate further when I can.

dddaaammmooo commented 9 years ago

I had the exact same error message down to the line number involved and found that jquery-bridget was not being downloaded into the vendor folder. Had to manually add jquery-bridget to my bower.json and it works fine now with the latest version of every vendor module involved.

Complete javascript include list (sorry theres some stuff not strictly related to this):

  'vendor/jquery/dist/jquery.js',
  'vendor/jquery-bridget/jquery.bridget.js',
  'vendor/get-style-property/get-style-property.js',
  'vendor/get-size/get-size.js',
  'vendor/eventEmitter/EventEmitter.js',
  'vendor/eventie/eventie.js', 
  'vendor/doc-ready/doc-ready.js',
  'vendor/matches-selector/matches-selector.js',
  'vendor/outlayer/item.js',
  'vendor/outlayer/outlayer.js',
  'vendor/masonry/masonry.js',
  'vendor/imagesloaded/imagesloaded.js',
  'vendor/angular/angular.js',
  'vendor/angular-sanitize/angular-sanitize.min.js',
  'vendor/angular-google-chart/ng-google-chart.js',
  'vendor/angular-bootstrap/ui-bootstrap-tpls.min.js',
  'vendor/placeholders/angular-placeholders-0.0.1-SNAPSHOT.min.js',
  'vendor/angular-ui-router/release/angular-ui-router.js',
  'vendor/angular-cookies/angular-cookies.js',
  'vendor/angular-camera/dist/angular-camera.js',
  'vendor/flow.js/dist/flow.min.js',
  'vendor/momentjs/min/moment.min.js',
  'vendor/ng-flow/dist/ng-flow.min.js',
  'vendor/angular-masonry/angular-masonry.js'

Complete bower.json:

{ "name": "xxxxxxx", "version": "0.3.2", "devDependencies": { "angular": "latest", "angular-mocks": "latest", "bootstrap": "latest", "angular-bootstrap": "latest", "angular-ui-router": "latest", "font-awesome": "latest", "animate-css": "latest", "jquery": "latest", "jquery.ui": "latest", "angular-sanitize": "latest", "angular-google-chart": "latest", "angular-cookies": "latest", "ng-flow": "latest", "angular-camera": "latest", "momentjs": "latest", "masonry": "latest", "angular-masonry": "latest", "jquery-bridget": "latest" }, "dependencies": {}, "resolutions": { "angular": "1.3.7", "masonry": "3.1.5" } }

Hope that helps.

plummer commented 9 years ago

manually adding jquery-bridget worked for me

fmpwizard commented 9 years ago

after manually adding bridget I still got this error, the work around for me was adding load-images="false" as an attribute to the <div masonry

mikefab commented 9 years ago

Neither adding jquery-bridget nor adding load-images="false" to <div masonry worked for me.

fmpwizard commented 9 years ago

@mikefab I found out the error may have several causes, this library depends on a few other js libraries, but not all the time, so to see which one you are missing, go ahead and use the non min version of the plugin, then on the stack trace you should be able to see which function call is the one being undefined, that should then help track down which library you are missing

hankim813 commented 9 years ago

@dddaaammmooo thank you, adding the jquery-bridget worked for me.

selvait90 commented 9 years ago

Hi @passy

I am also getting the same error when i try to run the example in my local. From the error message, looks like it is not recognising the masonry elements - line no 62 and 100.

script.js var app = angular.module("masonryExample", ['wu.masonry']); .... index.html - scripts added src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" src="script.js" src="angular-masonry.js"

passy commented 9 years ago

@selvait90 Could you check which lines this refers to in your installation? There's most certainly a missing dependency somewhere. :)

selvait90 commented 9 years ago

thanks a lot @passy I was able to resolve the error by adding dependencies in following order.

src="jquery-1.11.2.min.js"
src="masonry.pkgd.min.js" src="imagesloaded.pkgd.min.js" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" src="angular-masonry.js" src="myApp.js"

But I am developing the application in pure javascript without jQuery, So Is there way to get rid of the jQuery dependency in masonry plugin?

ozasadnyy commented 9 years ago

I have the same question as @selvait90 . Can I use masonry without jquery? Because the documentation said that I can, but actually I got next errors:

 TypeError: undefined is not a function
    at link.pre (http://localhost:8080/app/js/scripts.js:11952:29)
    at invokeLinkFn (http://localhost:8080/app/js/scripts.js:3492:21)
    at nodeLinkFn (http://localhost:8080/app/js/scripts.js:3270:21)
    at compositeLinkFn (http://localhost:8080/app/js/scripts.js:3108:21)
    at compositeLinkFn (http://localhost:8080/app/js/scripts.js:3108:119)
    at compositeLinkFn (http://localhost:8080/app/js/scripts.js:3108:119)
    at $get.node (http://localhost:8080/app/js/scripts.js:3089:40)
    at link (http://localhost:8080/app/js/scripts.js:8056:17)
    at invokeLinkFn (http://localhost:8080/app/js/scripts.js:3492:21)
    at nodeLinkFn (http://localhost:8080/app/js/scripts.js:3274:87) <div masonry="{ 'isFitWidth': true }" class="masonry">

TypeError: undefined is not a function
    at appendBrick (http://localhost:8080/app/js/scripts.js:11931:119)
    at link.pre (http://localhost:8080/app/js/scripts.js:11974:26)
    at invokeLinkFn (http://localhost:8080/app/js/scripts.js:3492:21)
    at nodeLinkFn (http://localhost:8080/app/js/scripts.js:3270:21)
    at compositeLinkFn (http://localhost:8080/app/js/scripts.js:3108:21)
    at $get.node (http://localhost:8080/app/js/scripts.js:3089:40)
    at $get.boundTranscludeFn (http://localhost:8080/app/js/scripts.js:3121:59)
    at controllersBoundTransclude (http://localhost:8080/app/js/scripts.js:3212:25)
    at http://localhost:8080/app/js/scripts.js:7332:32
    at Object.$watchCollectionAction [as fn] (http://localhost:8080/app/js/scripts.js:4718:92) <div class="masonry-brick md-whiteframe-z1 ng-scope" ng-repeat="pictureThumbnail in pictureThumbnails">

2013gang commented 9 years ago

Latest masonry already goes without jQuery. I totally think angular-masonry should remove jQuery depedency too.

I think @passy already had a feature quest for removing jqeury dependency.

pwlarry commented 9 years ago

I'm still getting this issue. Dependencies set up in the right order (referring to previous posts). I am using browserify to bundle all JS, could that be causing an issue?

var $ = require('jquery'); require('angular'); require('angular-ui-router'); require('jquery-ui'); require('angular-sanitize'); require('angular-module-animate'); require('jquery-bridget'); require('masonry-layout'); require('imagesloaded'); require('../../bower_components/angular-masonry/angular-masonry');

Error I'm getting:

mrprkr commented 9 years ago

Fixed by including imagesloaded!

ykhrustalev commented 9 years ago

+1 for missing jquery-bridget

jjwsteele commented 9 years ago

adding jquery-bridget worked for me as well

iduuck commented 9 years ago

I think the problem for the people without the fix (adding jquery-bridget) is simply requiring jquery-bridget before requiring the first masonry dependency. I had the problem that I was working with bower and the dependencies were required before jquery-bridget. Moving jquery-bridget to the top fixed the problem.

kentbong commented 9 years ago

any latest solution for this problem? I still facing the same problem, after added with jquery-bridget.js and also include the (load-images="false" to <div). Still having with "undefined" problem. Much appreciated if anyone can help. Thanks.

clov3r commented 9 years ago

I think it might be helpful for some (like me :P) to be a bit more explicit about including the dependencies in the html/js build.

I do now see that step 3 under #Usage in the readme is "Include dependencies in your HTML." but I came to the plugin through the homepage first, which doesn't make any mention of it. So I was confused for a bit there.

What worked for me was including masonry and imagesloaded in my build system (after jQuery, before angular, not sure if it matters).

I didn't (at least as of yet) need to install jquery-bridget...

fourmisz commented 9 years ago

Hi. I have fixed this problem.

First, I manually downloaded [jquery-bridget] [imagesloaded] from bower. Second, I checked depedencies. Finally,

script src="bower_components/jquery/dist/jquery.js" script src="bower_components/jquery-bridget/jquery.bridget.js" script src="bower_components/masonry/dist/masonry.pkgd.js" script src="bower_components/imagesloaded/imagesloaded.pkgd.js" script src="bower_components/angular/angular.js" script src="bower_components/angular-route/angular-route.js" script src="bower_components/angular-resource/angular-resource.js" script src="bower_components/angular-cookies/angular-cookies.js" script src="bower_components/angular-masonry/angular-masonry.js"

I loaded js files like this and error disappeared.

leads commented 9 years ago

Moving jquery-bridget up to the top of the bower dependencies list sorted it for me.

arsenetoumani commented 9 years ago

@clov3rly's answer worked for me. Including mansory before angular.

gimox commented 9 years ago

it's a broserify problem, it load dependency ordered as bower.json file, add first jquery and jquery-bridge and work.

kentbong commented 9 years ago

Hi all, I sorted it by placing my script as below order:

script src="lib/jquery.js" script src="lib/jquery.bridget.js" script src="lib/angular.js" script src="lib/angular-route.js" script src="lib/firebase.js" script src="lib/angularfire.min.js" script src="lib/bootstrap.js" script src="lib/ui-bootstrap-tpls-0.12.1.js" script src="lib/masonry.pkgd.min.js" script src="lib/imagesloaded.pkgd.js" script src="lib/angular-masonry.js"

But, I have a problem now, sometimes the pictures is loaded as 1 single column(vertically), sometimes it was fine. Any idea? Thanks.

iduuck commented 9 years ago

@kentbong I think we need some more insights into this, because we need to reproduce the error somehow.

mayankdixit commented 9 years ago

here is a fiddle that trhows this error: @passy http://jsfiddle.net/c8dn82vp/

koshuang commented 9 years ago

I also have this problem, it works when I add jquery-bridget to bower.js and make it before angular-mansory.

    "jquery-bridget": "~1.1.0",
    "angular-masonry": "~0.8.1",

cabilluos commented 9 years ago

Hi I have the same problem that @kentbong reported.

passy commented 9 years ago

Sorry, but this is impossible to look at for individual cases. It's always the loading order and there are plenty examples that have the correct one and I'd recommend to not do this manually at all and rely on some module loader or tools like wiredep to deal with it.

alexislg2 commented 9 years ago

Hey. Why is this issue closed? I tried to include manually all the dependencies (imageloaded, jquery, jquery-bridget...) and try all different orders but still get the same error. By the way, the demo URL does not work anymore so I really think there is a bug http://www.directiv.es/angular-masonry Could you please re open?

OverlappingElvis commented 9 years ago

Solved by uninstalling angular-masonry, then installing jquery-bridget before reinstalling angular-masonry. This should be fixed in angular-masonry's bower dependencies...

tw-zz-rk commented 9 years ago

+1 to @OverlappingElvis' fix, thanks!!

lidiexy commented 9 years ago

+1 to @OverlappingElvis

stuartm commented 9 years ago

These dependencies should be listed on the home page.

All 10 of them ... such a shame, it was looking promising for our project, but adding 10 additional libraries just to make Masonry work with Angular just isn't going to happen.

popovevgeny commented 9 years ago

Hey Just got the same issue.

Reordering dependancies in bower.json solved my problem:

"dependencies": {
    "jquery": "~2.1.0",
    "jquery-bridget": "~1.1.0",
    "angular": "~1.3.0",
    "masonry": "~3.2.0",
    "imagesloaded": "~3.1.0"
}

Shingaz commented 9 years ago

Totally agree with @stuartm. I use wiredep as @passy mentioned but actually the dependancies are removed then reinjected each time I build so the order of dependencies in bower.js matters. And it shouldn't =)

mreigen commented 9 years ago

@fourmisz +1

RopoMen commented 8 years ago

Issue is in this library. Yes, masonry currently has "no jQuery" support and I'm not using jQuery in my AnguarJS application atm. BUT Issue is in this line in angular-masonry.js. That may be issue in all other element.masonry() referencies as well. Like current masonry readme says masonry can be initialized like this without jQuery

// vanilla JS
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

AlexLai1990 commented 8 years ago

I have the same issue with the current demo now. I agree with @RopoMen. Is there anyway to solve for current version?

ykwx commented 8 years ago

I was including all of the correct dependencies in the correct order as mentioned above in the documentation. However, I was referencing them after my main vendor.js that gulp creates – so it was making one big js file with everything in an undefined order.

I moved the list of dependencies above this block and it works. If you're using gulp maybe check this.

<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run 'gulp inject' to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->

riverus-dev commented 7 years ago

@iDuuck your solution worked for me! Moving jquery-bridget to the top fixed the problem ;)

mkurshumov commented 7 years ago

+1 adding jquery-bridget fixed the issue