Materialize: Uncaught ReferenceError: Velocity is not defined

Created on 24 Apr 2015 · 31Comments · Source: Dogfalo/materialize

I was using v0.95.3 and there were no problems. When I upgraded to v0.96.0, I get this error "Uncaught ReferenceError: Velocity is not defined" thus, scripts are not working because of this error.

Source

sarpdoruk

Most helpful comment

Adding the imports-loader to webpack did not help at all. After hours of debugging this worked:

resolve: {
...
    alias: {
      'jquery': path.join( __dirname, 'node_modules/jquery/dist/jquery' ),
    }
  },

plugins: [
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: "jquery",
          'window.$': 'jquery',
          'window.jQuery': 'jquery',
      })
  ]

and then I could just do import 'materialize-css'. The resolve.alias part is VERY important in letting materialize-css refer to the same jquery as @PeterHase pointed out

zweicoder on 26 Dec 2016

👍8 😄3 ❤2

All 31 comments

Please post your HTML

Dogfalo on 24 Apr 2015

Here is my HTML, nothing fancy, justan accordion but it won't work because of this error.

<html lang="en-US" class="">
<head>      
<link rel="stylesheet" href="css/materialize.min.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
<ul class="collapsible" data-collapsible="accordion">
        <li style="color: #000000; background-color: #fdfdfd;">
            <div class="collapsible-header" style="color: #000000; background-color: #fdfdfd; border-bottom: 1px solid #ddd;">Accordion - 1</div>
            <div class="collapsible-body" style="border-bottom: 1px solid #ddd;"><p>This is a sample tab content</p></div>
        </li>
        <li style="color: #000000; background-color: #fdfdfd;">
            <div class="collapsible-header" style="color: #000000; background-color: #fdfdfd; border-bottom: 1px solid #ddd;">Accordion - 2</div>
            <div class="collapsible-body" style="border-bottom: 1px solid #ddd;"><p>This is a sample tab content</p></div>
        </li>
        <li style="color: #000000; background-color: #fdfdfd;">
            <div class="collapsible-header" style="color: #000000; background-color: #fdfdfd; border-bottom: 1px solid #ddd;">Accordion - 3</div>
            <div class="collapsible-body" style="border-bottom: 1px solid #ddd;"><p>This is a sample tab content</p></div>
        </li>
</ul>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

sarpdoruk on 25 Apr 2015

OK I got the answer by doing some code research.

When using materilize with wordpress jQuery is not defined with $ sign instead jQuery no conflict should be used. That's where the problem lies; in materialize.min.js Velocity is defined like this; Vel=$?$.Velocity:Velocity where it should instead be Vel=jQuery?jQuery.Velocity:Velocity

Changing $ to jQuery is the solution.

sarpdoruk on 26 Apr 2015

Dont close... the bug still is on the code.

cezarpirajant on 20 Nov 2015

same, on v0.97.3, working with webpack

aguegu on 3 Dec 2015

This was fixed recently on master: 67c93cff7d0e0d47c2fabcd89f2888906a73c61b

acburst on 3 Dec 2015

ok, so I did

npm i Dogfalo/materialize --save

but I still get the error "e.velocity is not a function"

aguegu on 3 Dec 2015

I figured it out. And v0.97.3 works fine.

var $ = window.jQuery = require('jquery');
require('materialize-css/bin/materialize.js');

$(function() {
    $(".button-collapse").sideNav();
});

All I add is window.jQuery = section. And then it just work.

my webpack.config.js loader for materialize-css.js:

{ test: /materialize-css\/bin\//, loader: 'imports?jQuery=jquery,$=jquery,hammerjs' },

aguegu on 3 Dec 2015

👍10

Same error here: "velocity not defined"
how do I fix this? I have no idea what you guys are talking about! Can you explain in simple steps

Lahori-Jawan on 9 Dec 2015

Using a higher jquery version i.e. 2.1.3 solved the problem.

Lahori-Jawan on 13 Dec 2015

check #2416

aguegu on 14 Dec 2015

The bug is still there in 0.97.7 :-1:

Wifsimster on 28 Jul 2016

😕10

I had similar problem, when I tried to use MaterializeCSS and Toast with Webpack. Two solutions worked for me:
1) require the whole materializeCSS:

window.jQuery = require('jquery');
require('materialize-css');

2) or require only what you need, for example:

window.jQuery = require('jquery');
require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
window.Vel = require('materialize-css/js/velocity.min');
require('materialize-css/js/hammer.min');
require('materialize-css/js/jquery.hammer');
require('materialize-css/js/global');

require('materialize-css/js/toasts');

Please pay attention to window.Vel = require('materialize-css/js/velocity.min'); line, that was the key for me.

klis87 on 25 Aug 2016

👍6 🎉1

Thank you very much @klis87!

I chose your first solution, but to make it work in a webpack-solution you had to modify your webpack.config.js a little bit:

resolve : {
        extensions: ['', '.js', '.jsx'],
        alias: {
            'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
        }
    }

The alias-part is very important so that 'materialize-css' referred to the same jQuery-version you use in your custom coding.

Did someone find a better solution without modifying the webpack.config.js, e.g. only within your index.(js|jsx)?

Best regards

---EDIT---
Just to show the way I implemented it in index.(js|jsx), finally:

// If you don't want to import jQuery in this way you should add the following
// lines into your webpack.config.js-plugins-part:
// new webpack.ProvidePlugin({
//    $: 'jquery',
//    jQuery: 'jquery',
//    'window.$': 'jquery',
//    'window.jQuery': 'jquery'
// })
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

require('materialize-css');

Afterwards you can use the .sideNav()-function in the usual way, e.g. in your React.Component:

class HeaderBar extends React.Component {
    componentDidMount () {
        $(".button-collapse").sideNav();
    }

   [...]

}

PeterHase on 25 Aug 2016

👍7 🎉3

im using webpack and still got error please help .. I have stuck the a day for this one i dont have choice because im using materializecss all the way..

screen shot 2016-10-15 at 11 18 48 pm

my code to load the materilizecss is just:

window.jQuery = window.$ = require('jquery');
require('materialize-css');


/*activate material select*/
$('select').material_select();

/*activate slidenav for mobile*/
$('.button-collapse').sideNav();

material_select() is working but why sideNav for me is not working, it has only one source which is the materialize-css, is the framework is not stable or its in my code?

aaesis on 15 Oct 2016

👍2

I'm having the exact same issue as @aaesis

rol4400 on 23 Oct 2016

@rol4400 I have fixed the issue by adding config in webpack

please see below:

screen shot 2016-10-25 at 11 35 28 am

aaesis on 25 Oct 2016

@aaesis You are a legend! For the convenience of copypasta:

In your main file:

window.jQuery = window.$ = require('jquery');
require('materialize-css');

/*activate slidenav for mobile*/
$('.button-collapse').sideNav();

In your Webpack config

module: {
  loaders: [
      {
          test: '/materialize-css/bin/',
          loader: 'imports?jQuery=jquery,$=jquery,hammerjs'
      }
  }

sethreidnz on 27 Oct 2016

@justsayno yes exactly. Enjoy coding brother.

aaesis on 27 Oct 2016

hey, i am using browserify, and 0.97.8, i tried all the tricks, not working, any clue ?

sallespro on 1 Nov 2016

For browserify.. add this option:

options: { "materialize-css": { "depends": [ "jquery:jQuery" ] } }

i dont know if its working for you but in my end, its working that needs jquery.

aaesis on 7 Nov 2016

This library has serious issues with module loaders!!! @klis87 solution was what ultimately worked for me.

reneolivo on 8 Dec 2016

👍3

Adding the imports-loader to webpack did not help at all. After hours of debugging this worked:

resolve: {
...
    alias: {
      'jquery': path.join( __dirname, 'node_modules/jquery/dist/jquery' ),
    }
  },

plugins: [
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: "jquery",
          'window.$': 'jquery',
          'window.jQuery': 'jquery',
      })
  ]

and then I could just do import 'materialize-css'. The resolve.alias part is VERY important in letting materialize-css refer to the same jquery as @PeterHase pointed out

zweicoder on 26 Dec 2016

👍8 😄3 ❤2

@zweicoder Thank you, this solution worked for me

AlwaysBee on 8 Jan 2017

I have resolved the problem after replaced js file with the latest version

Yulight1401 on 13 Jan 2017

It looks solved, feel free to reopen it if it is necessary

fega on 4 Apr 2017

@zweicoder Thank you, helped a lot

sandhiya-velayutham on 28 Apr 2017

Hi All
I tried to use above webpack conf in react-materializecss but it returns below errors:

ERROR in ./~/react-materializecss/src/Button.js
Module parse failed: /Users/harish/Documents/Work/workspace/node_modules/react-materializecss/src/Button.js Unexpected token (30:6)
You may need an appropriate loader to handle this file type.
|     });
|     return (
|       <C {...this.props} className={cx(classes)}>
|         {this.props.children}
|       </C>
 @ ./~/react-materializecss/src/index.js 2:10-29
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./app

Below is the loader i have used

 {
        test: '/react-materializecss',
        loader: 'imports?jQuery=jquery,$=jquery,hammerjs'
      }
resolve.alias
      'jquery': PATHS.root + '/node_modules/jquery/dist/jquery.js'
 and
 new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.$': "jquery",
      'window.jQuery': "jquery"
    }),

Please help

harishrohokale on 24 Aug 2017

There is a webpack loader for materialize. Have you tried that?
https://github.com/zevran/materialize-loader

tomscholz on 24 Aug 2017

@tomscholz Will that work for react-materialize?

harishrohokale on 24 Aug 2017

@harishrohokale I dunno ^^ Haven't tried it. ~~Maybe should try to file an issue over at the react-materialize repo.~~Ahh I see you already did that...

tomscholz on 24 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings