materialize: 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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 8
Comments: 26 (5 by maintainers)

Commits related to this issue

Use forked materialize for time being https://github.com/Dogfalo/materialize/issues/2949 — committed to spiral-modules/vault by AndrewKirkovski 7 years ago

Most upvoted comments

Adding

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

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

Wifsimster on Jul 28, 2016

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

ArtistNeverStop on Nov 1, 2016

I use it on v0.97.7

// Check for jQuery.
// TODO: Fix $(dom).velocity is not function bug
if (typeof(jQuery) === 'undefined') {
  // var jQuery;
  // Check if require is a defined function.
  if (typeof(require) === 'function') {
    window.jQuery = window.$ = require('jquery');
  // Else use the dollar sign alias.
  } else {
    window.jQuery = $;
  }
}
;

import 'materialize-css/dist/js/materialize.js'

Akimyou on Aug 30, 2016

I ran into the same issue. You just need to make sure you attach jQuery to the window when you require it:

window.jQuery = window.$ = require('jquery');

This should be imported before materialize.

benelliott on Apr 13, 2016

Looks like there have to be velocity-animate package installed and exported as following:

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

only then i get it work

linuxenko on Apr 27, 2016

The only solution I got to work was the @ArtistNeverStop one. But modify the source code of materialize.js for just this stupid jQuery check break all the automation by using bower / gulp in project release process. Do I have to fork materialize to fit my build process or a “proper” fix is going to be released ?

Here is the fork fix for NPM "materialize-css": "https://github.com/ZiperRom1/materialize/tarball/884b152cac7da763fd11bb4e8a8c4d3eedb2475e" https://github.com/ZiperRom1/materialize/tarball/884b152cac7da763fd11bb4e8a8c4d3eedb2475e

mister-good-deal on Mar 19, 2017

The problem with this approach is that this changes the downloaded dependency, so anyone to re-build the project would have to run the same step (extremely error-prone). I found that this trick fixes the build for me too, but I can’t include it into the final build.

I think that jQuery is not really a “dependency” (in NPMs sense) of Materialize.css. Materialize expects global jQuery object and “private” dependency that it is relying on is not imported anywhere.

To me it looks like Materialize CSS is falls into a category of “peer dependencies”: https://nodejs.org/en/blog/npm/peer-dependencies/

Juriy on Jan 2, 2017