conflict using materialize on angularjs + gruntjs + requirejs #1212
Comments
|
view my comment on #634 and close the issue if that was solved for you, because this issue is there before so no need to it, if you have any probs feel free to contact me |
|
I tried on your repo with the latest commit then I modify my codes into something like this require.config({
paths: {
angular: 'path/to/angular',
jquery: 'path/to/jquery',
hammerjs: 'path/to/hammerjs'
materialize: 'path/to/materialize'
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
materialize: {
deps: ['jquery'']
}
}
});instead it gives me an error Mismatched anonymous define() module:and it occurs for the hammerjs, so I thought I need to include the hammerjs files require.config({
paths: {
angular: 'path/to/angular',
jquery: 'path/to/jquery',
hammerjs: 'path/to/hammerjs'
materialize: 'path/to/materialize'
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
materialize: {
deps: ['jquery'', 'hammerjs']
}
}
});it all works fine but when I try to initiate datepicker it says that datepicker is not a functionso my conclusion is I think I need to reload all of my components.. then I changed my codes to this require.config({
paths: {
angular: 'path/to/angular',
jquery: 'path/to/jquery',
materialize: '../vendors/materialize_custom/bin/materialize',
materialBox: '../vendors/materialize/js/materialbox',
animation: '../vendors/materialize/js/animation',
buttons: '../vendors/materialize/js/buttons',
charCounter: '../vendors/materialize/js/character_counter',
forms: '../vendors/materialize/js/forms',
global: '../vendors/materialize/js/global',
jEasing: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min',
jHammer: '../vendors/materialize/js/jquery.hammer',
cards: '../vendors/materialize/js/cards',
collapsible: 'https://cdnjs.cloudflare.com/ajax/libs/jquery.collapsible/1.2/jquery.collapsible.min',
dropdown: '../vendors/materialize/js/dropdown',
leanModal: '../vendors/materialize/js/leanModal',
hammerjs: '../vendors/hammerjs/hammer.min',
parallax: '../vendors/materialize/js/parallax',
picker: '../vendors/materialize/js/date_picker/picker',
pickadate: '../vendors/materialize/js/date_picker/picker.date',
pushPin: '../vendors/materialize/js/pushpin',
tabs: '../vendors/materialize/js/tabs',
tooltip: '../vendors/materialize/js/tooltip',
toasts: '../vendors/materialize/js/toasts',
transitions: '../vendors/materialize/js/transitions',
velocity: 'https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min',
waves: '../vendors/materialize/js/waves',
sideNav: '../vendors/materialize/js/sideNav',
scrollFire: '../vendors/materialize/js/scrollFire',
scrollSpy: '../vendors/materialize/js/scrollspy',
slider: '../vendors/materialize/js/slider',
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
angularRoute: ['angular'],
angularCookie: ['angular'],
moment: ['jquery'],
hammerjs: ['jquery'],
picker: ['jquery'],
pickadate: ['jquery'],
jEasing: ['jquery'],
animation: ['jquery'],
global: ['jquery'],
collapsible: ['jquery'],
dropdown: ['jquery'],
leanModal: ['jquery'],
materialBox: ['jquery'],
parallax: ['jquery'],
tabs: ['jquery'],
tooltip: ['jquery'],
toasts: ['jquery'],
waves: ['jquery'],
sideNav: ['jquery'],
scrollSpy: ['jquery'],
forms: ['jquery'],
slider: ['jquery'],
cards: ['jquery'],
pushPin: ['jquery'],
buttons: ['jquery'],
transitions: ['jquery'],
scrollFire: ['jquery'],
charCounter: ['jquery'],
materialize: {
deps: [
'jquery',
'jEasing',
'animation',
'velocity',
'hammerjs',
'jHammer',
'global',
'collapsible',
'dropdown',
'leanModal',
'materialBox',
'parallax',
'tabs',
'tooltip',
'waves',
'toasts',
'sideNav',
'scrollSpy',
'forms',
'slider',
'cards',
'pushPin',
'buttons',
'transitions',
'scrollFire',
'picker',
'pickadate',
'charCounter'
]
}
}
});but now the waves effect didn't work and toasts didn't work either... :( did I missed something ? @max1011 |
|
materialize is included from dist or from bin ?? |
|
I include it from bin @max1011 |
|
don't load any thing from the materialize project to the materialize project , like hammerjs, and all the other stuff you are loading just don't load them, and load only materialize with any third party libraries that you want, and look at the console tell me what is the output and on which line and what is that line (if there is) |
|
I have the same problem. I've included materialize but no other libraries. If I include hammerjs it's ok but when I start the app I get a requirejs error : |
|
Similar issue here. My config is like this: require.config({
deps: ['main'],
baseUrl: 'js',
paths: {
//Libraries
jquery: 'libs/jquery.min',
lodash: 'libs/lodash.min',
json2: 'libs/json2',
text: 'libs/text',
hammerjs: 'libs/hammer.min',
parse: 'libs/parse.min',
materialize: 'libs/materialize.min'
},
shim: {
parse: { deps: ['lodash', 'jquery'], exports: 'Parse'},
materialize: { deps: ['jquery', 'hammerjs'] }
}
});I'm getting intermittent error "Uncaught TypeError: a(...).hammer is not a function" whenever I'm trying to use sideNav() function. |
|
@T00rk this is what the doc says about your issue(mismatched define..) & how to fix it (because you manually used the code),
|
|
@kat-liger hammer is undefined because the jquery hammer (which is different that hammer.js), was not loaded properly or even not loaded at all ! , here is how it should look like in the shim according to the new version: 'jquery.hammer': {
deps: ['jquery', 'hammerjs', 'waves']
} |
|
@ekarudianto i think if your problem is with waves then you must add it as a dep. to jquery.hammer just like the comment above |
|
@max1011 Yes I've spent a lot of time to understand where it comes from. It only happens when I include materialize. |
|
i thought that you included the code manually (copy & paste) in the final compiled js file, now you still have that probem or any similar issue ? |
|
Hi @max1011, thanks for your response! I downloaded jquery.hammer.js and waves.js and added them to paths in require.config and to shim, like you advised, but it didn't help, unfortunately, I am still getting "Uncaught TypeError: a(...).hammer is not a function" intermittently. |
|
@kat-liger can u take a screenshot please? , and tell me which line it was , and if you put your code up some where like code pen or fiddler just so that i can grab all of it that will be alot better |
|
@max1011 You can see it here: http://kat-liger.github.io/100things2do/ Might take more than one refresh though :) And thanks so much for trying to help! |
|
ok so i diagnosed your site and i can see that jquery.hammer is not being loaded (check the network tab to see it your self), so the solution to that is to add it as a dep. to materialize (as 'jquery.hammer'), and hopefully that will make it work |
|
@max1011, wow, thank you so much! Finally it works! |
|
you are welcome @kat-liger , @T00rk do you still have the problem ? try to do the same. |
|
Yes I still have the same problem. |
|
what is your code currently ? , try to make a plunk or something, i want to see your code and try it live, or maybe use heroku and put it online so that i can diagnose it properly. |
|
Ahh something new. |
|
ok check the network tab in chrome and check if jquery.hammer is loaded, and just give me the code please! |
|
Just a question. What's the correct way to include materialize ? |
|
you said that you included it but where did you do so, and did you copy & paste to some file ? cause that can be the entire issue, in require.js you are not allowed to copy and paste code with define() into some other file that has other define() |
|
Here is my requirejs init file as I modified it : |
|
first of all for jquery.hammer it should look like this: 'jquery.hammer': {
deps: ['jquery', 'hammerjs', 'waves']
} |
|
Yes sorry I was trying something. |
|
|
add the global module as a dep. to forms |
|
It seems to work. I'll try grunt build |
|
ok, tell me what happens |
|
same problem 😒 |
|
the materialize undefined problem ? |
|
No |
|
but this error to which file ? |
|
did u copy paste anything ? |
|
to compile that file u need to use r.js not file concatenation plugins cause that causes problems, if u don't know how to use it here is the code to run it: cd js
r.js -o app.build.js for the app.build.js it must have the same shim as the other file, and it has other configs do it on your own check the docs for any other options, here is an example app build file: |
|
I think the problem comes from velocity. Here is the whole error (prettified) (Click to expand) |
|
listen i need all of your code to identify the real problem , i just can't look at some error and tell you what is the reason (most of the times you can), but here it's a little bit more complicated, can u put your code in a repo or just anything i want to see all of your files really to know exactly what are you trying to do, and are u using my repo (Materialize-AMD), give it a try , and try to customize the code that is in there and compile with r.js, at the end u have to figure it out some way! |
|
Closed due inactivity. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've been using materialize as my starter template framework for my project, it was lovely, I love this framework... but I've been facing this issue where I'm trying to use sideNav() function..
it gives an error
so I've modified the requirejs loader section
but it still gives an error which is
any idea about this issue ?
The text was updated successfully, but these errors were encountered: