CODEWITHSUNDEEP
shopifyslate-shopify
user1868401
user1868401

Reputation: 33

ReferenceError: $ is not defined at dist/assets/theme.js?5556:274 in Shopify Slate theme

I using slate for shopify theme developement. Slate : https://github.com/Shopify/slate

node -v : v10.16.0
npm -v : 6.9.0
slate -v : 0.14.0

Followed follwoing step
1) slate theme mydemo
2) slate build (created dist folder)
3) slate zip (upload this theme on shopify store and get theme id.)
4) set store, password, theme id in config.yml file.
5) slate deploy
6) slate watch

Get error in complied dist folder Uncaught ReferenceError: $ is not defined in dist/assets/theme.js at line number 274 slate.Sections.prototype = $.extend({}, slate.Sections.prototype, {

https://jsrajyaguru.myshopify.com/products/650c-micro-wheelset when I change variation from dropdown price and product image not change due to javascript error.

Upvotes: 1

Views: 3830

Answers (2)

Ben Wright
Ben Wright

Reputation: 26

Be sure the version you're calling in the scripts/vendor.js matches your jQuery version number in the scripts/vendor folder.

For example after a fresh install of slate in my vendor.js it was:

/*!
 * jquery-2.2.3.min.js
 */
// =require vendor/jquery-2.2.3.min.js

and in my vendor folder the version supplied was 3.3.1 so I changed my vendor.js to

/*!
 * jquery-3.3.1.min.js
 */
// =require vendor/jquery-3.3.1.min.js

Upvotes: 1

quyetdc
quyetdc

Reputation: 1585

Uncaught ReferenceError: $ is not defined is issued because you don't load jquery before another .js files.

Try to add below ( simple solution ) line into the very top of the <head> tag in your layout/theme.liquid

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

Upvotes: 3

Related Questions