Migrating code to Shopify and got Uncaught ReferenceError: require is not defined

Retired Boards Appdev Store Design
,
1

I’m working on migrating my product information from Magento to Shopify, and one of the field is an entire HTML document. I believe we cannot upload HTML file to Shopify files folder, so I create a Metaobject with text fields and tried to display it using liquid. While the HTML and CSS can be correctly display, the jQuery codes in tags do not work properly.

Here’s the error I got:

Uncaught ReferenceError: require is not defined

Here’s a sample code in the HTML document:

var $thPic = ["https://some/path/to/images/001.png","https://some/path/to/images/002.png",
"https://some/path/to/images/003.png","https://some/path/to/images/004.png"];
var $thList = [];

for (i = 0; i < $thPic.length; i++) {
    $thList[i] = new Image();
		if (i === 1) {
			$thList[i].onload = function () {
				console.log('Done');
			};
		};
    $thList[i].src=$thPic[i];
}

require(['jquery','fancymedia' ], function ($) {
	$(document).ready(function() {
        $('.fancybox-media').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            }
        });
    });
});

I have a more than 1000 HTML documents for more than 1000 products, so it will be very time consuming if I need to rewrite all the functions. Could this be solved by including any libraries in the header, using any third party software, removing require(['xxxx','yyyy'], function ($) {}) wrapper, or adding other wrapper to existing code?

I have tried to include jQuery and Require.js library CDN in the header. Here’s the entire error message:

GET https://shop-name.myshopify.com/products/owlcarousel.js net::ERR_ABORTED 404

GET https://shop-name.myshopify.com/products/fancymedia.js net::ERR_ABORTED 404

GET https://shop-name.myshopify.com/products/jquery.js net::ERR_ABORTED 404

Uncaught Error: Script error for "owlcarousel"
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.min.js:1:1795)
    at HTMLScriptElement.onScriptError (require.min.js:1:17084)

Uncaught Error: Script error for "fancymedia"
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.min.js:1:1795)
    at HTMLScriptElement.onScriptError (require.min.js:1:17084)

Uncaught Error: Script error for "jquery"
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.min.js:1:1795)
    at HTMLScriptElement.onScriptError (require.min.js:1:17084)

It would be great if anyone could let me know what goes wrong here, and it would be awesome if anyone could tell me how to fix this! Any input is appreciated!

2

Hi Ariesariel415,

Is this HTML doc field intended to be displayed or rendered on the front-end product page? If so, you might be seeing this issue if jQuery is not being included correctly into the theme. There is a third party guide here on how you can add jQuery to a Shopify theme which should be helpful.

Also you may want to explore if it’s possible to avoid a dependancy on jQuery as we typically don’t advise using large utility libraries where it’s practical, for performance reasons. There’s some good info in our developer docs on strategies for reducing third-party dependancies.

Hope this helps and best of luck with the migration!

3

Hi Liam,

Thank you so much for your response! After posting the question, I actually found out the solution to display HTML doc written with jQuery with Require.js loader on the frontend page.

I downloaded all the dependency files into the asset folder (instead of using CDN link) and included the following line of code in the beginning of the tag in theme.liquid:

I learned this from this tutorial (just for reference if anyone is facing the same problem).

Thank you for the advice on suggesting reducing third party dependencies as well. I’ll look into it and adjust my codes accordingly!

4

Great to hear you found a solution Ariesariel415 - and thanks for coming back to share!