CODEWITHSUNDEEP
javascript
boisterouslobster
boisterouslobster

Reputation: 1293

Calling method from compiled js file

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?

Upvotes: 1

Views: 215

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55613

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.

Upvotes: 1

Related Questions