Webpack load materialize-css, Cannot read property 'swing' of undefined

Question

It was all working well, but when I import CryptoJS from "crypto-js", it shows error. I have no clue why importing something unrelated can break materialize-css? It happened before too. webpack is so difficult. Any clue is appreciated. Thank you!

TypeError: Cannot read property 'swing' of undefined (anonymous function) node_modules/materialize-css/dist/js/materialize.js:42

  39 | })(function ($) {
  40 | 
  41 |   // Preserve the original jQuery "swing" easing as "jswing"
> 42 |   $.easing['jswing'] = $.easing['swing'];
  43 | 
  44 |   var pow = Math.pow,
  45 |       sqrt = Math.sqrt,

"jquery": "^3.2.1", "materialize-css": "^0.100.1",

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': "jquery",
      'window.$': "jquery",
      "Hammer": "hammerjs/hammer",
      Materialize: 'materialize-css/dist/js/materialize.js',
      "window.Materialize": 'materialize-css/dist/js/materialize.js',
    }),

Denly Denly · Accepted Answer · 2017-08-23T15:56:23

I fund I don't need to import by webpack.ProvidePlugin, just import the materialize-css/dist/js/materialize.js in index.js (entry) solved the issue. Probably because of it was loading before jQuery loading.

Webpack load materialize-css, Cannot read property 'swing' of undefined

1 Answers