Laravel 混合和 Turbolinks
[英]Laravel Mix and Turbolinks
问题描述
I am having some problems with turbolinks setup.
我在设置 turbolinks 时遇到了一些问题。 Here is setup: Laravel Mix - with defaults: bootstrap, jquery,..).这是设置：Laravel 混合 - 默认值：引导程序，jquery，..）。 And just after bootstrap.js file I have included turbolinks.就在 bootstrap.js 文件之后，我包含了 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)编辑这里是 js 包括（编译 - Laravel Mix）
<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>
This is my app.js:这是我的 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,...)和 bootstrap.js（包括 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';
3 个解决方案
解决方案1
0
In the error you have shown it is written that Uncaught TypeError: $ is not a function this error mostly comes when jquery is not defined before the script which is calling it.在您显示的错误中，写着Uncaught TypeError: $ is not a function此错误主要发生在 jquery 未在调用它的脚本之前定义时。
Add jquery in the head of html, before the turbolinks script by downloading the jquery or via cdn that is通过下载 jquery 或通过 cdn 将 jquery 添加到 html 的head ，在turbolinks脚本之前
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
解决方案2
0 2020-07-31 04:46:19
move your <script defer src="/js/app.js" data-turbolinks-track="true"></script> above your vendor.js and remove defer from script tags.将您的<script defer src="/js/app.js" data-turbolinks-track="true"></script>移到您的vendor.js ，并从脚本标签中删除defer 。 to load jquery before your code在您的代码之前加载 jquery
<head>
<script src="/js/manifest.js" data-turbolinks-track="true"></script>
<script src="/js/app.js" data-turbolinks-track="true"></script>
<scrip src="/js/vendor.js" data-turbolinks-track="true"></script>
</head>
解决方案3
0 2020-08-05 08:01:58
Just try putting JQuery first and then popper js.试着先放 JQuery 然后再放 popper js。
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
The reason this says so - https://getbootstrap.com/docs/4.0/getting-started/introduction/#js这么说的原因 - https://getbootstrap.com/docs/4.0/getting-started/introduction/#js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.