Materialize: webpack integration

[MurhafSousli]

there is a bug in materialize when working with webpack.
when I add materialize this way

import 'jquery';
import 'materialize-css';

I get this exception on Horizontal FAB from the button components (http://materializecss.com/buttons.html#floating)

Uncaught TypeError: $this.find(...).velocity is not a function

but when I add the script the normal way

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

it works, so the problem is when I bundle materialize.js, some functions stop to work. what can I do to fix it?

[seemsindie]

@MurhafSousli I had the same error but managed to solve it by requiring it in my entry file like:

require('materialize-css/dist/css/materialize.css')
require('materialize-css/dist/js/materialize.js')

I don't like this but it's working.

[MurhafSousli]

I tried this, I get this exception:
EXCEPTION: TypeError: dragTarget.hammer is not a function
and two warnings

./~/jQuery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.
./~/jquery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

[seemsindie]

@MurhafSousli Install hammerjs via npm and add this to your webpack.config:

plugins: [
    new webpack.ProvidePlugin({
      "Hammer": "hammerjs/hammer"
    })
  ]

or if you also need jQuery something like:

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

[vp2177]

Minimal repro testcase: vp2177/materialize-webpack-testcase
Build using npm run build. Try vanilla.html - works. Then webpacked.html - fails.

[sagg629]

@seemsindie thank you so much, your approach is working successfully in my project!!! :+1:

[seemsindie]

@padre629 Np, glad it helps.

[hammadfauz]

I still have the issue velocity is not a function, despite following workaround by @seemsindie above. How can I re-open this issue?

[yyyuuu777]

oh , i solve this issue by easy way , the problem is cause by jQuery , you can use materialize package jQuery , just like :
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')