使用 webpack Laravel 5.4 加载物化时的 jQuery 错误

Question

I would like use http://materializecss.com/ on Laravel 5.4 (compiled with webpack).

window.$ = window.jQuery = require('jquery');

require('materialize-css');
// or
// require('materialize-css/dist/js/materialize.js');
// but same issue

$(document).ready(function(){
    $('.materialboxed').materialbox();
    $('.modal').modal();
    $('.parallax').parallax();
});

This is my code but the error is:

Uncaught TypeError: $(...).materialbox is not a function

It work with this :

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{ asset('js/materialize.min.js') }}"></script>
<script>
   $(document).ready(function(){
      $('.materialboxed').materialbox();
      $('.modal').modal();
      $('.parallax').parallax();
   });
</script>

But if I put jquery document ready in app.js, it doesn't work :

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="{{ asset('js/materialize.min.js') }}"></script>
 <script src="{{ mix('js/app.js') }}"></script>

app.js :

$(document).ready(function(){
    $('.materialboxed').materialbox();
    $('.modal').modal();
    $('.parallax').parallax();
});

Answer 1

I also had this kind of issue with materialize-css in Laravel 5.4, and my quick fix was to download the materializecss source to /resources/assets/ manually. This is what my directory looks like now,

/resources
----/js
-------app.js
-------bootstrap.js
----/materialize
-------/css
-------/fonts
-------/js

Then, on my bootstrap.js , I added this code

require('../materialize/js/materialize.js');

And this solved my problem.

Answer 2

The way to include javascript in blades (in laravel) is:

<script src="{{ asset('assets\bower\jquery\dist\jquery.min.js') }}"></script>
<script src="{{ asset('assets\bower\materialize\dist\js\materialize.min.js') }}"></script>

Your assests (js & css) have to be located somewhere under /public

I would recommend using bower for your assetmanagement, but this is not required.