materialize-css Uncaught TypeError: Vel is not a function

Question

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 including the library in the main index.js file by:

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

Does anyone know why this could be happening? Looking at the bundled source, the js for materialize is there.

Answer 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/yarn

import "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"
  }),