Materialize: Button waves-effect doesn't return to original state by itself.

[ghstahl]

"materialize-css": "^0.97.7",
<button class="btn waves-effect waves-light" onclick="{updateRoles}" >Submit</button>

I am using this via webpack.

When I click the button the wave effect happens, and continual clicking makes my button whiter and whiter. It never returns to its original state. So now I am sitting here with a completely white button.

Oddly enough, if I move my mouse over and over on the button, it slowly comes back.

I wish I could repo those on codepen.
My project is simple and build-able here and repos the issue.
Any material button has the problem

https://github.com/ghstahl/riotjs-materializecss-webpack

[ghstahl]

found my solution using this thread.
https://github.com/Dogfalo/materialize/issues/2667

heneryville: You'll get this behavior if you've included the materialize javascript more than once on the page.

I am using webpack and had this import
import './js/materialize.js';
in multiple places.

I only have it in my vendor.js file now and waves work properly.

[ValneyFaria]

Great solution man. Thanks!

[androizer]

@ghstahl how did you manage to get it to work? I'm using it in my Angular project and have multiple imports to materialize.js due to the use of several different components. Your help will be very appreciated.

[DuskTiIIDawn]

Ong i have wasted one hour on this,,,lol thanks man

[duarte171183]

@DuskTiIIDawn you can fixed this?

[Jayanta227]

thanks @ghstahl , i was facing same problem and i was using with react project. I imported the materialize.js like
import M from 'Materialize-css';
and also in the script tag using the cdn link.

after i removed the cdn link, it was working fine

[TanvirRobbany]

thanks @Jayanta227
i was stuck with the same problem in react
you saved my time

[dojca-nenad]

When you import M use:
import M from "materialize-css/dist/js/materialize.min.js";