In a project of mine, I was tearing my hair out trying to understand why subscriptions weren’t loading when they were in fact being returned by the API.

When I was debugging the problem, I finally got to this method:

getPlans()
{
    axios.get('/spark/plans')
         .then(response => {
             this.plans = this.billingUser
                 ? _.where(response.data, {type: "user"})
                 : _.where(response.data, {type: "team"});
         });
}

The response.data would have the correct plans…yet…the _.where was erroring out and Javascript was claiming that “where” was not a function.

The where() function is part of underscore, which Laravel Spark uses. However, I’m also using Lodash, which also wants to attach itself to the window. Lodash used to have a where() function, but got rid of it when they upgraded to v4+.

I debated about changing the vendor code and having to do that all along my deployment route and anytime I wanted to upgrade. Nope. Deleted.

Since I can’t change Laravel Spark’s vendor code, I was left with few options but figure out how to reconcile this Lodash/underscore conflict.

I tried to override the functions that used where(), since Vue will let you override methods from mixins, and Laravel Spark basically extends its vendor code into your resources, where you CAN make edits. But, I ran into trouble when I tried to override computed properties. That road quickly closed and it was getting very, very messy anyway. Deleted.

Maybe, further down the Javascript line, I’ll redeclare underscore’s where function. That didn’t work. Deleted.

Finally, I came across a very simple solution. In my app.js that contains my main Vue declarations, I put:

window.lodash = _.noConflict();

Apparently, lodash knows it can be a conflicting little jerk! This solved all of my issues and plans appeared on all of my pages immediately.

Hurray! Too bad that one line took me 2 days to research.

Leave a Reply

Your email address will not be published. Required fields are marked *