react-awesome-button icon indicating copy to clipboard operation
react-awesome-button copied to clipboard

Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.

Open ericcastro opened this issue 4 years ago • 1 comments

Hi - I'm fairly new to React in general. I've trying the simplest usage of this component, yet browser becomes plagued with this JS error as soon as the mouse is over the button. CPU goes to 100% and fans run at full speed. The animation and interaction with the button becomes laggy and stutters instatly.

Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.
    at toggleMoveClasses (http://localhost:3000/static/js/0.chunk.js:4406:34)
    at AwesomeButton.clearPress (http://localhost:3000/static/js/0.chunk.js:4716:35)
    at onMouseLeave (http://localhost:3000/static/js/0.chunk.js:4784:17)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:6150:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:6199:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:6252:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:6267:29)
    at executeDispatch (http://localhost:3000/static/js/0.chunk.js:6352:7)
    at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:6377:9)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:9261:9)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:9270:14)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:9240:13)
    at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:9287:7)
    at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:9497:7)
    at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:9541:9)
    at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:27687:16)
    at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:6759:16)
    at dispatchEventForLegacyPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:9551:9)
    at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:10271:9)
    at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:10192:23)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:35969:16)
    at dispatchUserBlockingUpdate (http://localhost:3000/static/js/0.chunk.js:10175:7)

What am I missing ? Here is my App.js

import { AwesomeButton, AwesomeButtonProgress } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'
import './App.css';



function App() {

  return (
    <div className="App">
      <header className="App-header">
        <p>
        <AwesomeButton
              cssModule={AwesomeButtonStyles}
              type="primary">
              Hello World
            </AwesomeButton>
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ericcastro avatar Apr 15 '20 08:04 ericcastro

the problem is when using "cssModule={AwesomeButtonStyles}" (as taken from the demo examples) - removing it makes the problem go away but I would not be able to explain why

ericcastro avatar Apr 15 '20 08:04 ericcastro