I seem to be unable to call a method from a JS package from one of my other files (all.js). I am using Laravel 5.4, VueJS2, and VueRouter. This is an SPA where Laravel serves as a backend.
I get the following error: TypeError: $.LoadingOverlay is not a function
I am utilizing web pack and compiling the assets like this:
mix.js([
'resources/assets/js/bootstrap.js',
'resources/assets/js/helpers.js',
'././node_modules/gasparesganga-jquery-loading-overlay/src/loadingoverlay.min.js',
'resources/assets/js/app.js',
'././node_modules/moment/min/moment.min.js',
'././node_modules/moment-duration-format/lib/moment-duration-format.js',
], 'public/js/all.js').version();
The file containing the code I am trying to pull in is the loadingoverlay.min.js file. The file that is referencing it is right underneath it (app.js).
My app.js file:
import Vue from 'vue';
import VueRouter from 'vue-router';
var $ = require('jquery');
Vue.use(VueRouter);
const routes = [
.. routes here
];
const router = new VueRouter({
routes,
mode: 'history',
});
router.beforeEach((to, from, next) => {
console.log('Entering route');
$.LoadingOverlay('show');
next();
});
router.afterEach((to, from) => {
console.log('Entered route');
$.LoadingOverlay('hide');
})
const app = new Vue({
router
}).$mount('#app');
The blade file that is responsible for pulling in the compiled assets:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="{{ mix('css/all.css') }}">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<div id="app">
<section class="container">
<div>
<router-view></router-view>
</div>
</section>
</div>
<script src="{{ mix('js/all.js') }}"></script>
</body>
</html>
Interestingly enough, I am able to call the method from that file from my blade page by adding <script></script> tags after the all.js file is pulled in, and calling it from there.
Any ideas on why this may be happening?
Exactly as it says, because $.LoadingOverlay is not a function.
The jQuery compiled into your all.js via webpack (done via nodejs) will cause the $ = require('jQuery') to be different than the one globally exposed via window.$
window.$ is referencing jQuery 1.11.0 and the one inside your app.js is referencing the jQuery built with webpack.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments