Materialize: k.velocity is not a function

[akashbiz]

ERROR TypeError: k.velocity is not a function
    at h (materialize.js:3)
    at HTMLDivElement.<anonymous> (materialize.js:3)
    at HTMLDivElement.dispatch (jquery.js:4737)
    at HTMLDivElement.elemData.handle (jquery.js:4549)
    at Object.trigger (jquery.js:7807)
    at HTMLDivElement.<anonymous> (jquery.js:7875)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.trigger (jquery.js:7874)
    at jQuery.fn.init.open (materialize.js:3)
    at jQuery.fn.init.a.fn.modal (materialize.js:3)
    at HTMLDocument.<anonymous> (materialize-directive.js:185)
    at fire (jquery.js:3187)
    at Object.add [as done] (jquery.js:3246)
    at jQuery.fn.init.jQuery.fn.ready (jquery.js:3496)
View_OperationalComponent_1 @ OperationalComponent.html:6
DebugContext_.logError @ core.es5.js:13000
ErrorHandler.handleError @ core.es5.js:1145
next @ core.es5.js:4774
schedulerFn @ core.es5.js:3848
SafeSubscriber.__tryOrUnsub @ Subscriber.js:234
SafeSubscriber.next @ Subscriber.js:183
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3834
NgZone.triggerError @ core.es5.js:4205
onHandleError @ core.es5.js:4166
ZoneDelegate.handleError @ zone.js:369
Zone.runTask @ zone.js:168
ZoneTask.invoke @ zone.js:460


ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 13, nodeDef: Object, elDef: Object, elView: Object}

I am using Angular2 Cognito Quickstart with Materializecss. I am trying to open modal but I am facing the above issue. I have tried many issue related to this but many solutions includes webpack plugin addition or defining externals in webpack.config.js. I don't contain webpack.config.js file in my folder structure created by this quickstart.
Please help.

[DanielRuf]

Please provide a codepen.

It might be due to your Materialize integration.

https://github.com/Dogfalo/materialize/search?utf8=✓&q=velocity+is+not+a+function&type=Issues

[DanielRuf]

What about the app.js file for the require / import fix?

[akashbiz]

I have imported materialize by writting the below two lines in app.modules.ts

import "materialize-css";
import { MaterializeModule } from "angular2-materialize";

and made MaterializeModule entry in module imports.
I am refering this https://github.com/InfomediaLtd/angular2-materialize

[DanielRuf]

And how did you import jQuery and which jQuery version?

Did you already try the solutions in the issues from the link?

For example https://github.com/Dogfalo/materialize/issues/2949#issuecomment-291948967

[DanielRuf]

Please take a look at https://github.com/InfomediaLtd/angular2-materialize/issues/162 and all comments starting at https://github.com/InfomediaLtd/angular2-materialize/issues/20#issuecomment-236180979

[akashbiz]

jQuery was installed by the materialize package it self... version it downloaded is v2.2.4

[akashbiz]

I have tried window.jQuery solution but it didn't work for me and as I mentioned I don't have webpack file in my folder structure. Do you want me create a new webpack.config.js file manually? What should be its format to include below code.

externals: {
jquery: 'jQuery'
},

[DanielRuf]

Did the recommended fixes from the links not solve it? Because it seems the other developers with the exact same issue could solve it with these fixes.

[DanielRuf]

@tomscholz any idea? I'm neither an Angular expert nor have any experience with Angular.

[akashbiz]

No, I tried all the things but nothing worked for me from the listed solutions. I am not sure why am I facing that. I have also checked the code and there is no difference I find from its working example.
http://angularscript.com/angular-2-support-for-materialize-css-framework/

Can you tell me the cause of this issue, then I can look into that.
Thanks.

[munjal-vandana]

I am going through exact same problem, none of the solution listed work for as well.

[Thanood]

I don't have webpack file in my folder structure

Which module loader/bundler are you using then?

This could be related to two jquery instances being on the page. The webpack config is probably about using only one. The problem is that Materialize requires jQuery (upper-case Q) while the package is called jquery (lower-case Q).

As far as I know, you would have to configure your loader/bundler to use one instance in both cases (plus I think window.jquery and $).

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.

[guibot17]

I'm having the same issue. I followed all the steps described in the installation guide of materialize along with its dependencies, but I'm getting the same message:
ERROR TypeError: k.velocity is not a function
at h (materialize.js:3)
at HTMLDivElement.

Any help will be really appreciated

[jflip]

guibot17 I had this issue recently and I found this Stack Overflow question and it solved my issue
https://stackoverflow.com/questions/39998806/angular2-materialize-modals-dont-open

in my app.module.ts I had:

import "materialize-css"
import { MaterializeModule } from 'angular2-materialize'

I removed the first import statement it stopped the error:

// import "materialize-css"
import { MaterializeModule } from 'angular2-materialize'

[DanielRuf]

@jflip that is because the angular2-materialize project wraps materialize-css and provides the MaterializeDirective directive for the components.

[guibot17]

@jflip and @DanielRuf thank you all.

[Daniyalislam]

@jflip You saved my day :) Thank you.