Laravel-mix: mix.js broke some jquery function inside it

[stefensuhat]

• Laravel Mix Version: 0.7.4
• Node Version (node -v): 7.5.0
• NPM Version (npm -v): 4.1.2
• OS: Windows 10 x64

I'm using Laravel Mix (0.7.4) to compile down my JS file (contain datatable).

$('.table').DataTable({
    columnDefs: [
        {targets: 0, orderable: false, searchable: false},
    ]
});

But every time I run it the console always return me Uncaught TypeError: $(...).DataTable is not a function

at my index.blade.php

 <script src="{{ asset('vendor/jquery/dist/jquery.js') }}"></script>
 <script src="{{ asset('vendor/datatables/media/js/jquery.dataTables.js') }}"></script>

webpack.mix.js

mix.js(`resources/assets/js/pages/city.js`, 'public/js/admin/pages/city.js');

When I use Laravel Elixir webpack function working normally, but when I change to Laravel Mix it become error.

Before I init those 2 file seperately I have mix version (mix.combine) of jquery and jquery.datatables. But its not working.

To make it work I need to put $('.table').DataTable() outside any JS. I think something broke it when I run mix.js()

Any solution?

[lamemind]

+1

I'm using AdminLTE, which comes with many jquery plugins
If I "mix.js" the main app.js file, I get an error "$(...).tooltip is not defined"
If I don't mix the app.js, everyhing's fine.

My guess is the following: Laravel Mix creates a local copy of jquey, discarding all the registered plugins.

[jwhulette]

I had the same problem using SB Admin 2. In bootstrap.js I changed:
// window.$ = window.jQuery = require('jquery');
window.$ = global.jQuery = require('jquery');

[JeffreyWay]

You can try setting mix.autoload({}) in your webpack.mix.js file.

@jwhulette - I just pushed a commit that disables rewriting window.jQuery, so that might fix your particular issue. f83b54fca8976a770f51edd2e995048f17337418

Otherwise, if someone can give me reproducible steps in a brand new project, that would be appreciated.