Materialize-css Uncaught Typeerror: Vel Is Not A Function

I'm using webpack as my bundler/loader and I can load materialize css in fine (js/css), but when I try to use the toast, it says Uncaught TypeError: Vel is not a function I am incl

Solution 1:

Had a same problem & came up with somewhat simpler solution: Only 2 things are needed to be done:

First: Import following in you root module like app.js

//given you have installed materialize-css with npm/yarnimport"materialize-css";
import'materialize-css/js/toasts';

Second: if webpack, set following Plugin or get the velocity.min.js as global variable just like you would use jquery:

  new webpack.ProvidePlugin({
    "$": "jquery",
    "jQuery': "jquery",
    "Vel": "materialize-css/js/velocity.min.js"
  }),

Solution 2:

I'm also trying to use materialize-css with webpack and have also run into this issue (albeit not for the same reason). Materialize isn't really built with a module loader in mind, and use global variables. They also bundle dependencies into their script directly in a way you might not want in a webpack-workflow.

I have a setup not exactly the same as you but I'll share it anyways, hoping it will help, my webpack+materialize works like this in a file i've created;

/**
 * custom-materialize.js
 */// a scss file where we include the parts I use.require('./custom-materialize.scss');

/**
 * materialize script includes
 * we don't use all the plugins so no need to
 * include them in our package.
 */require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
// note: we take these from npm instead.//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/collapsible');require('materialize-css/js/dropdown');

Then just install Velocity from npm npm install velocity-animate and point the global Vel materialize use to that package instead in webpack.

new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'Vel': 'velocity-animate'
  }),

Solution 3:

you have to import css and js Files separately in your index.html you must not import css file in index.js

Solution 4:

Make sure that the uglifyJsPlugin is like this.

new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: false})

mangle property should be false so that the variable names of your source file doesn't change when you minify.