Uncaught ReferenceError: Waves is not defined

[muffrank]

when i get the waves from bower version 0.7.2. i try to init it by
Waves.init();
its return this error:
Uncaught ReferenceError: Waves is not defined.
bower.json
"waves":"0.7.2"
auto attach file:
<link rel="stylesheet" href="bower_components/waves/dist/waves.min.css" /> <script src="bower_components/waves/dist/waves.min.js"></script>
my html button:
<button class="btn bgm-red btn-float waves-effect"><i class="md md-add"></i></button>
how i initialize it :
Waves.init();
and then i get this error.

this is the waves.min.js file:
`
/*!

• Waves v0.7.2
• http://fian.my.id/Waves
  *
• Copyright 2014 Alfiana E. Sibuea and other contributors
• Released under the MIT license
• https://github.com/fians/Waves/blob/master/LICENSE
  _/
  !function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return b.apply(a)}):"object"==typeof exports?module.exports=b.call(a):a.Waves=b.call(a)}("object"==typeof global?global:this,function(){"use strict";function a(a){return null!==a&&a===a.window}function b(b){return a(b)?b:9===b.nodeType&&b.defaultView}function c(a){var b=typeof a;return"function"===b||"object"===b&&!!a}function d(a){return c(a)&&a.nodeType>0}function e(a){var b=m.call(a);return"[object String]"===b?l(a):c(a)&&/^[object (HTMLCollection|NodeList|Object)]$/.test(b)&&a.hasOwnProperty("length")?a:d(a)?[a]:[]}function f(a){var c,d,e={top:0,left:0},f=a&&a.ownerDocument;return c=f.documentElement,"undefined"!=typeof a.getBoundingClientRect&&(e=a.getBoundingClientRect()),d=b(f),{top:e.top+d.pageYOffset-c.clientTop,left:e.left+d.pageXOffset-c.clientLeft}}function g(a){var b="";for(var c in a)a.hasOwnProperty(c)&&(b+=c+":"+a[c]+";");return b}function h(a,b,c){if(c){c.classList.remove("waves-rippling");var d=c.getAttribute("data-x"),e=c.getAttribute("data-y"),f=c.getAttribute("data-scale"),h=c.getAttribute("data-translate"),i=Date.now()-Number(c.getAttribute("data-hold")),j=350-i;0>j&&(j=0),"mousemove"===a.type&&(j=150);var k="mousemove"===a.type?2500:o.duration;setTimeout(function(){var a={top:e+"px",left:d+"px",opacity:"0","-webkit-transition-duration":k+"ms","-moz-transition-duration":k+"ms","-o-transition-duration":k+"ms","transition-duration":k+"ms","-webkit-transform":f+" "+h,"-moz-transform":f+" "+h,"-ms-transform":f+" "+h,"-o-transform":f+" "+h,transform:f+" "+h};c.setAttribute("style",g(a)),setTimeout(function(){try{b.removeChild(c)}catch(a){return!1}},k)},j)}}function i(a){if(q.allowEvent(a)===!1)return null;for(var b=null,c=a.target||a.srcElement;null!==c.parentElement;){if(c.classList.contains("waves-effect")&&!(c instanceof SVGElement)){b=c;break}c=c.parentElement}return b}function j(a){q.registerEvent(a);var b=i(a);if(null!==b)if("touchstart"===a.type&&o.delay){var c=!1,d=setTimeout(function(){d=null,o.show(a,b)},o.delay),e=function(e){d&&(clearTimeout(d),d=null,o.show(a,b)),c||(c=!0,o.hide(e,b))},f=function(a){d&&(clearTimeout(d),d=null),e(a)};b.addEventListener("touchmove",f,!1),b.addEventListener("touchend",e,!1),b.addEventListener("touchcancel",e,!1)}else o.show(a,b),n&&(b.addEventListener("touchend",o.hide,!1),b.addEventListener("touchcancel",o.hide,!1)),b.addEventListener("mouseup",o.hide,!1),b.addEventListener("mouseleave",o.hide,!1)}var k=k||{},l=document.querySelectorAll.bind(document),m=Object.prototype.toString,n="ontouchstart"in window,o={duration:750,delay:200,show:function(a,b,c){if(2===a.button)return!1;b=b||this;var d=document.createElement("div");d.className="waves-ripple waves-rippling",b.appendChild(d);var e=f(b),h=a.pageY-e.top,i=a.pageX-e.left,j="scale("+b.clientWidth/100_3+")",k="translate(0,0)";c&&(k="translate("+c.x+"px, "+c.y+"px)"),"touches"in a&&a.touches.length&&(h=a.touches[0].pageY-e.top,i=a.touches[0].pageX-e.left),d.setAttribute("data-hold",Date.now()),d.setAttribute("data-x",i),d.setAttribute("data-y",h),d.setAttribute("data-scale",j),d.setAttribute("data-translate",k);var l={top:h+"px",left:i+"px"};d.classList.add("waves-notransition"),d.setAttribute("style",g(l)),d.classList.remove("waves-notransition"),l["-webkit-transform"]=j+" "+k,l["-moz-transform"]=j+" "+k,l["-ms-transform"]=j+" "+k,l["-o-transform"]=j+" "+k,l.transform=j+" "+k,l.opacity="1";var m="mousemove"===a.type?2500:o.duration;l["-webkit-transition-duration"]=m+"ms",l["-moz-transition-duration"]=m+"ms",l["-o-transition-duration"]=m+"ms",l["transition-duration"]=m+"ms",d.setAttribute("style",g(l))},hide:function(a,b){b=b||this;for(var c=b.getElementsByClassName("waves-rippling"),d=0,e=c.length;e>d;d++)h(a,b,c[d])}},p={input:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");c.className=a.className+" waves-input-wrapper",a.className="waves-button-input",b.replaceChild(c,a),c.appendChild(a);var d=window.getComputedStyle(a,null),e=d.color,f=d.backgroundColor;c.setAttribute("style","color:"+e+";background:"+f),a.setAttribute("style","background-color:rgba(0,0,0,0);")}},img:function(a){var b=a.parentNode;if("i"!==b.tagName.toLowerCase()||!b.classList.contains("waves-effect")){var c=document.createElement("i");b.replaceChild(c,a),c.appendChild(a)}}},q={touches:0,allowEvent:function(a){var b=!0;return/^(mousedown|mousemove)$/.test(a.type)&&q.touches&&(b=!1),b},registerEvent:function(a){var b=a.type;"touchstart"===b?q.touches+=1:/^(touchend|touchcancel)$/.test(b)&&setTimeout(function(){q.touches&&(q.touches-=1)},500)}};return k.init=function(a){var b=document.body;a=a||{},"duration"in a&&(o.duration=a.duration),"delay"in a&&(o.delay=a.delay),n&&(b.addEventListener("touchstart",j,!1),b.addEventListener("touchcancel",q.registerEvent,!1),b.addEventListener("touchend",q.registerEvent,!1)),b.addEventListener("mousedown",j,!1)},k.attach=function(a,b){a=e(a),"[object Array]"===m.call(b)&&(b=b.join(" ")),b=b?" "+b:"";for(var c,d,f=0,g=a.length;g>f;f++)c=a[f],d=c.tagName.toLowerCase(),-1!==["input","img"].indexOf(d)&&(pd,c=c.parentElement),c.className+=" waves-effect"+b},k.ripple=function(a,b){a=e(a);var c=a.length;if(b=b||{},b.wait=b.wait||0,b.position=b.position||null,c)for(var d,g,h,i={},j=0,k={type:"mousedown",button:1},l=function(a,b){return function(){o.hide(a,b)}};c>j;j++)if(d=a[j],g=b.position||{x:d.clientWidth/2,y:d.clientHeight/2},h=f(d),i.x=h.left+g.x,i.y=h.top+g.y,k.pageX=i.x,k.pageY=i.y,o.show(k,d),b.wait>=0&&null!==b.wait){var m={type:"mouseup",button:1};setTimeout(l(m,d),b.wait)}},k.calm=function(a){a=e(a);for(var b={type:"mouseup",button:1},c=0,d=a.length;d>c;c++)o.hide(b,a[c])},k.displayEffect=function(a){console.error("Waves.displayEffect() has been deprecated and will be removed in future version. Please use Waves.init() to initialize Waves effect"),k.init(a)},k});
  //# sourceMappingURL=waves.min.js.map
  `

[fians]

Can you share your whole HTML code?

[muffrank]

I have update the question

[fians]

Where do you place waves.min.js and Waves.init()? Because You should place the script before calling Waves.init().

[muffrank]

<script src="bower_components/waves/dist/waves.min.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script>
Waves.init().
is in app.js

[hoxxep]

If you're using angular.js (judging from your app.js and controllers/ folders) you cannot access window variables simply from anywhere. In a regular <script> tag:

<script>
    Waves.init();
    window.Waves.init();  // equivalent
</script>

But with Angular due to the different scoping, to access a global/window variable you'll need to use the $window service module and access waves through $window.Waves.init() (or do your Waves.init() in a "non-angular" script).

Read more: $window.

---

Side note to @fians: can add a "Usage" label for issues/questions that are related to Waves' usage/help rather than a bug/feature request?

[ppollo07]

Hello, i have a same problem "Uncaught ReferenceError: Waves is not defined".

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
    <link rel="stylesheet" href="/content/css/libs/waves.css" />
</head>
<body>
...
    <script type="text/javascript" src="/scripts/lib/waves.min.js"></script>

    <script>
        $(document).on('ready', function () {
            // Init Waves
            Waves.init(); <<<< here its error
        });
    </script>

</body>
</html>

when put breackpoint in lib i can access to object but document its ready i cant access to Waves object.

[fians]

@ppollo07 I don't think there is any error on Waves. Here is my fiddle http://jsbin.com/xawicesiwu/edit?html,console,output. But if you still see the error, please create a fiddle of it, so I can easily to check it out.

[ppollo07]

@fians I think its any problem with another library used. I use libs googlemap, googleads, underscore, boba, bootstrap, and more.

What do you think about this? can change object name?

[chmartinez]

I think that it could be a name collision issue. For instance, there is an object named "global" in the waves's code. Try using namespaces on your code.

[ppollo07]

thank @chmartinez the problem was that, i have a generic objeto call "globlal".
typeof global === 'object' ? global : this, function() << my code crash here
@fians sorry and thanks!!

[fians]

@ppollo07 no problem. Good to hear that.

[hgwood]

Ran into this issue today.

This code typeof global === 'object' ? global : this might be a little fragile. I guess it's meant to pass global instead of window when running the code in Node.js, however it breaks in the browser if:

• there is a user-defined global (@ppollo07's case)
• there is an element with id global
• the code is running in NW.js (my case), where both window and global are present

Browserify has the same issue and accompanying PR. See here for my comment about the issue in NW.js.

But while I understand why Browserify has this, I'm not sure why Waves needs it. Why would you want to have Node's global passed to the factory? It only uses it as a fallback for DOM elements, so passing global doesn't look like it is useful. Maybe @Narsul can help, since he is the author of the code.