Uncaught TypeError: $indicator.velocity is not a function

I installed the plugins using npm and bundled it using webpack. The plugin was required as following:

export default class App extends React.Component {
   ...
  componentDidMount() {
    require('materialize-css/dist/js/materialize');
  }

  render() {
    return (
        <div className='row'>
          <div className='col s12'>
            <ul className='tabs'>
              <li className='tab col s3'><a href='#test1'>Test 1</a></li>
              <li className='tab col s3'><a className='active' href='#test2'>Test 2</a></li>
              <li className='tab col s3 disabled'><a href='#test3'>Disabled Tab</a></li>
              <li className='tab col s3'><a href='#test4'>Test 4</a></li>
            </ul>
          </div>
          <div id='test1' className='col s12'>Test 1</div>
          <div id='test2' className='col s12'>Test 2</div>
          <div id='test3' className='col s12'>Test 3</div>
          <div id='test4' className='col s12'>Test 4</div>
      </div>
    );
  }
}

I always got the Uncaught TypeError: $indicator.velocity is not a function error when clicking on Tab . However, if I required the plugin in HTML instead, it worked just fine. I’m not quite sure what’s going wrong.

[Wifsimster]

Adding

window.jQuery = window.$ = require('jquery');
window.$.velocity = require('velocity-animate/velocity.js')

doesn’t fix the velocity bug anymore on v0.97.7 👎

[ArtistNeverStop]

Guys!! Just delete the JQuery dependency in materialize folder in node_modules/materialize_css/node_modules/JQuery ! 😄

this problem is because materialize have a JQuery dependency obsolete