Issue: $(...).gridstack is not a function

[mehdirajani5]

Here is the error can anybody help me out.

ERROR TypeError: $(...).gridstack is not a function
at libria-gridstack.js:356
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:16115)
at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent.ngOnInit (libria-gridstack.js:340)
at checkAndUpdateDirectiveInline (core.js:20665)
at checkAndUpdateNodeInline (core.js:21929)
at checkAndUpdateNode (core.js:21891)
at debugCheckAndUpdateNode (core.js:22525)
at debugCheckDirectivesFn (core.js:22485)
View_DragAndDropComponent_0 @ DragAndDropComponent.html:44
proxyClass @ compiler.js:17945
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:22729
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14645
(anonymous) @ core.js:16895
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895
(anonymous) @ core.js:16779
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:16156
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070
next @ core.js:16779
schedulerFn @ core.js:12609
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593
checkStable @ core.js:16125
onHasTask @ core.js:16169
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone.updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
DragAndDropComponent.html:44 ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}
View_DragAndDropComponent_0 @ DragAndDropComponent.html:44
proxyClass @ compiler.js:17945
push../node_modules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:22729
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:14650
(anonymous) @ core.js:16895
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:16115
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895
(anonymous) @ core.js:16779
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:16156
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:16070
next @ core.js:16779
schedulerFn @ core.js:12609
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593
checkStable @ core.js:16125
onHasTask @ core.js:16169
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
DragAndDropComponent.html:44 ERROR TypeError: Cannot read property 'batchUpdate' of undefined
at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent._handleItemChanges (libria-gridstack.js:590)
at GridstackComponent.push../node_modules/@libria/gridstack/fesm5/libria-gridstack.js.GridstackComponent.ngAfterViewInit (libria-gridstack.js:524)
at callProviderLifecycles (core.js:20982)
at callElementProvidersLifecycles (core.js:20956)
at callLifecycleHooksChildrenFirst (core.js:20946)
at checkAndUpdateView (core.js:21882)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21879)
at callViewAction (core.js:22114)

[seifeldinsamer]

I hadthe same issue.
what angular version are you using ?

[federicomameli]

I'm facing a similar issue :
ERROR TypeError: $(...).gridstack is not a function
at libria-gridstack.js:169
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:123)
at NgZone.runOutsideAngular (core.js:41565)
at GridstackComponent.ngOnInit (libria-gridstack.js:158)
at callHook (core.js:4708)
at callHooks (core.js:4672)
at executeInitAndCheckHooks (core.js:4612)
at refreshView (core.js:11911)
at refreshComponent (core.js:13331)
In bundle with this other:
ERROR TypeError: Cannot read property 'batchUpdate' of undefined
at GridstackComponent._handleItemChanges (libria-gridstack.js:249)
at GridstackComponent.ngAfterViewInit (libria-gridstack.js:233)
at callHook (core.js:4708)
at callHooks (core.js:4672)
at executeInitAndCheckHooks (core.js:4612)
at refreshView (core.js:11969)
at refreshComponent (core.js:13331)
at refreshChildComponents (core.js:11622)
at refreshView (core.js:11945)
at refreshComponent (core.js:13331)
I don't know if it's the same problem.
"@libria/gridstack": "^9.0.0",
"@angular/core": "~9.1.1",
"bootstrap": "^4.4.1",
"gridstack": "^1.1.1",
"jquery": "^3.5.0",
"jquery-ui-dist": "^1.12.1",

[Kuorti]

Same problem

[shashi97]

Same problem with me,

Package.json

"@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/localize": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    **"@libria/gridstack": "^9.0.1",**
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "bootstrap": "^4.4.1",
    "d3": "^3.5.17",
    "deepmerge": "^4.2.2",
    "font-awesome": "^4.7.0",
    **"gridstack": "^1.1.1",**
    "jquery": "^3.4.1",
    "jquery-easing": "0.0.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-ui-touch-punch": "^0.2.3",
    "moment": "^2.24.0",
    "ng-bpm": "^9.3.3",
    "ng-bpm-ui": "^9.3.3",
    "ng2-nvd3": "^2.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-clipboard": "^12.3.0",
    "nvd3": "^1.8.6",
    "pdfmake": "^0.1.63",
    "protractor-jasmine2-html-reporter": "0.0.7",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "underscore": "^1.9.1",
    "zone.js": "~0.10.2"

[adumesny]

Guys, if you're you're using gridstack 1.x (and upcoming 2.x) jquery has been removed from API so $(...).gridstack is not a function anymore. There is new API to access and GridStack.init() the grid.

[ranjeettamil]

Hi Adumesny,
I updated to latest version ("gridstack": "~v1.1.2",) and removed other API dependency (lodash, jquery) in angular json file, even after I am facing same error. Below is my config,

Package JSON

"gridstack": "~v1.1.2",

Angular.json file.

"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/select2/dist/js/select2.min.js"
"node_modules/gridstack/dist/gridstack.all.js",
]

Issue

@adumesny
Can you please suggest me to resolve this issue.

[adumesny]

https://github.com/gridstack/gridstack.js#migrating-to-v100
I.E. this lib code HAS TO CHANGE to support 1.x - see #4

[michaelsizonenko]

Same issue.

Notice the lb-gridstack angular wrapper works with gridstack v. 0.3.0

Run this:

yarn add gridstack@~0.3.0 jquery@~2.2.0 jquery-ui-dist@~1.12.1 lodash@~4.17.4

Works for me.
However it would be nice to upgrade angular wrapper up to recent version of gridstack.

[adumesny]

you might be able to use as far as 0.6.4 - I don't know as I don't use this lib. I have my own angular component wrapper, though I've been thinking of publishing one along with gridstack since that is what I use. This lib only has 80 downloads a week (vs 25k for gridstack) so not exactly popular :(

[K0d343V3r]

@adumesny That would be great if you could publish your Angular wrapper. We have an Angular 8 app and looking to use GridStack for our project.

[adumesny]

@K0d343V3r I wouldn't wait. I barely have the time to work on gridstack (without help) so publishing my Angular wrapper (which has a lot of custom code we use at VMWare) is not gonna happen...