Lodash ReferenceError: _ is not defined in Vue even though it works everywhere else

Question

In my component shoppingCart.vue file I'm calling a simple method:

saveCart : _.debounce(() => {
            console.log('hi');
        }, 2000),

But I get the Error: Uncaught ReferenceError: _ is not defined.

Now gets the fun part. If I change the function for example to:

saveCart(){
   console.log(_.random(0, 5));
}

Everything works perfekt and I get for example: 4. To make it even more interesting, I have some other components that are using _.debounce for example searching for Users:

findUsers: _.debounce(
     function (term) 
     {
        let vm = this;
        axios.get('/search', { params: { user: term }})
            .then(response => {
                vm.updateResult(response.data);
            });
    }
  ,500),

And it works perfect.

So here are some background informations for you. I think I have a guess where the problem is but I'm not sure: I'm using Laravel and I'm import Lodash through bootstrap.js with

window._ = require('lodash');

My component shoppingCart.vue is being called by Buying.vue. Buying.vue is called by

export default new VueRouter({
   mode: 'history',
   routes: [
      {
        path: '/:user/:title',
        component: require('./views/buying/Buying'),
      },
   ],
});

Maybe the problem is somewhere because of vue router? But I tried to make a jsfiddle http://jsfiddle.net/gnu5gq3k/, but my example works in this case... In my real life project test2 creates the problem...

What could be the problem? What kind of informations do you need to understand my problem better?

Edit I must be doing some easy mistake that I cannot see: I changed the code to:

debounce(func, wait, immediate) {

        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    },
    saveCart: this.debounce(() => {
                // All the taxing stuff you do
                console.log('blubb');
            }, 250),

And I cannot call my own function!

Uncaught TypeError: this.debounce is not a function
at Object

What am I doing wrong?

score 14 · Accepted Answer · answered Mar 03 '18 at 20:13

14

Error: Uncaught ReferenceError: _ is not defined.

In shoppingCart.vue do import _ from 'lodash';:

<script>
  import _ from 'lodash';

  export default {
     // ...
  }
</script>

Uncaught TypeError: this.debounce is not a function at Object

You can't use this while constructing an object (the object is not created yet). You can use it in functions because that code is not executed right away.

window.a = "I'm window's a";
var myObj = {
  a: 1,
  b: this.a
};
console.log(myObj); // {a: 1, b: "I'm window's a"}

answered Mar 03 '18 at 20:13

acdcjunior

132,397
37
331
304

It's super weird for me, why should I import it when it's global? And it works in other component just fine. With the import it just works... super weird – Philipp Mochine Mar 03 '18 at 20:36
1

It's because that code is preprocessed in many ways before it actually is deployed to run in the browser. In build time the context is very restricted (that's a good thing) and there's no `window` yet. Some code is only ran on runtime (at the browser), not build time, which is why they don't fail. – acdcjunior Mar 03 '18 at 20:42

score -1 · Answer 2 · answered Mar 03 '18 at 20:33

-1

My solution is a workaround:

mounted(){
  let that = this;
  let savingCart = _.debounce(() => {
     that.saveCart();
  }, 1000);

  window.events.$on('savingCart', savingCart);
}

This works fine

answered Mar 03 '18 at 20:33

Philipp Mochine

4,351
10
36
68

Lodash ReferenceError: _ is not defined in Vue even though it works everywhere else

2 Answers2