Materialize-css Uncaught TypeError: Vel is not a function

Question

I use webpack as my loader / loader and I can load the css materialization in order (js / css), but when I try to use a toast, it says

Uncaught TypeError: Vel is not a function

I include the library in the main file index.js:

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

Does anyone know why this might happen? Looking at a related source, js is for materialization.

Answer 1

Had the same problem and came up with a slightly simpler solution: Only 2 things need to be done:

First: Import the following into the root module, for exampleapp.js

//given you have installed materialize-css with npm/yarn

import "materialize-css";
import 'materialize-css/js/toasts';

:, webpack, velocity.min.js , jquery:

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

Answer 2

materialize-css webpack ( ). . script , webpack-workflow.

, , , , , webpack + materialize , ;

/**
 * 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');

Velocity npm npm install velocity-animate Vel webpack.

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

Answer 3

you need to import css and js files separately in index.html you do not have to import css file in index.js

Answer 4

Make sure uglifyJsPlugin looks like this.

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

mangle the property must be false so that the variable names of your source file do not change when mining.