#StackBounty: #javascript #jquery #laravel #turbolinks #laravel-mix Laravel Mix and Turbolinks

Bounty: 50

I am having some problems with turbolinks setup. Here is setup: Laravel Mix – with defaults: bootstrap, jquery,..). And just after bootstrap.js file I have included turbolinks. Everything works until page reload – where I always get error. What am I doing wrong?

ERROR:

app.js:1282 Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (app.js:1282)
    at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
    at r.notifyApplicationAfterPageLoad (vendor.js:105934)
    at r.visitCompleted (vendor.js:105934)
    at r.complete (vendor.js:105933)
    at r.<anonymous> (vendor.js:105933)
    at vendor.js:105933

LINE with ERROR:

document.addEventListener('turbolinks:load',function() {
    new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
    $(".sidebar-toggle").on("click", function() {
        //...
    });
});

EDIT
Here are js includes (compiled – Laravel Mix)

<head>
/js/manifest.js
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
/js/app.js
</head>

This is my app.js:

require('./bootstrap');
let Turbolinks = require('turbolinks');
Turbolinks.start();

require("./dashboard");
require('./custom/INotifier').run();

require("./theme/bootstrap");
require("./theme/theme");

And bootstrap.js (includes jQuery, bootstrap js, axios,…)

try {

window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');

} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.