Shopify Themes running outdated jQuery, lodash, and handlebars?

brenfife
New Member
1 0 5

Hello, I am currently helping a family-friend of mine build a website for the floral catering business, and am current using the Brooklyn theme. I ran a lighthouse audit from within Chrome's Dev tools and I got back old versions of jQuery, lodash, and handlebars. I'd like to avoid running outdated software (as anyone should), especially since the lodash and handlebars seem to have high severity. Has anyone updated their themes sites using newer versions of these libraries and if so, did anything break. Thanks!

Replies 5 (5)
timurbarre
New Member
1 0 0

I can't even figure out where Lo-Dash@4.5.1 came from.

 

In assets files(vendors, theme, etc), it doesn't exist.

 

P.S. Debut theme.

Animal_Kingdoms
Shopify Partner
5 0 0

Did you find lodash location?

Maxw1122
New Member
2 0 0

you need to update your jquery library to 3.0 from 2.0. go to the vendor.js file and find the part that says jquuery 2.0, delete that and include the jquery 3 function. 

 

copy and past this: https://2019.igem.org/Team:Poitiers/javascript/jquery-3_3_1_min_js. where the old library was. 

andylewie
Excursionist
20 0 2

I would love to know what the solution is for the Brooklyn theme too, as Google Lighthouse is giving me the same security vulnarability errors which makes me nervous.

The jquery code is saved in jquery-2.2.3.min.js, and lodash is inside theme.js.liquid along with underscore.js.

The below is from the theme.js.liquid file:

/**
* @license
* lodash 4.5.1 (Custom Build) lodash.com/license | Underscore.js 1.8.3 underscorejs.org/LICENSE
* Build: `lodash core -o ./dist/lodash.core.js`
*/

andylewie
Excursionist
20 0 2

I run the Brooklyn theme and fixed my issues as follows.

 

To fix the jquery vulnerability I:

Created a new .min.js file for jquery version 3.6.0 in the Assets folder

Changed the reference to the new version in theme.liquid

In theme.js.liquid, in the timber.accessibleNav function

  • Changed “timber.cache.$window.load(function() {“ to “timber.cache.$window.on('load', function() {“

 

To fix the lodash vulnerability I:

Added this include code to the theme.liquid file “{{ 'lodash-4.5.1.js' | asset_url | script_tag }}”

Moved the original lodash code from theme.js.liquid into Assets/lodash-4.5.1.js

Saved the latest lodash as Assets/lodash-4.17.21.min.js

Updated the lodash reference in theme.liquid file to {{ 'lodash-4.17.21.min.js' | asset_url | script_tag }}