Using lodash & underscore without conflicts with Laravel Spark 3.*

Today I just upgraded Laravel Spark from version 2.0.13 to 3.0.5. As expected, there was a lot of changes to make because of the upgrade to Vue 2.*.

Everything went pretty smooth until I noticed the plans were not loading in the settings of my application.

After a few minutes investigating, I found out where it was coming from: the settings/subscription.js file from Laravel Spark, specifically this method:

/**
 * Get the active plans for the application.
 */
getPlans() {
    this.$http.get('/spark/plans')
        .then(response => {
            this.plans = this.billingUser
                           ? _.where(response.data, {type: "user"})
                           : _.where(response.data, {type: "team"});
        });
}

The request was indeed triggered, but for an unknown reason, the plans were not loading into my Vue components at all…

Turns out it was because Laravel Spark uses underscore as the variable _ but my application was also loading lodash, so _ was in fact lodash.

It wasn’t a problem before, but somehow it became an issue with this update.

If you are experiencing the same issues and are using lodash by using imports (ex.: import { find } from 'lodash'), simply add the following line at the end of your main app.js like so:

import './filters';

require('spark-bootstrap');

require('./components/bootstrap');

var app = new Vue({
   mixins: [require('spark')]
});

window.lodash = _.noConflict();

This way _ will be used as underscore :)