Javascript errors, only sometimes

Question

The website is throwing a bunch of javascript errors. They are the kind that look like jquery was not loaded properly. These errors don't happen 100% of the time though. I don't understand requirejs enough to understand what is going on.

Example of JS errors

This is running Magento 2 and the Pearl theme by WeltPixel.

Not sure what else would be useful, should I post the source code of the page?

• user59036: More details: It seems like some type of race condition as the actual errors will change as I shift-refresh the page.

Answer 1

This error is returned if you do not have permissions and/or static content is not generated.

You have to run the commands

php bin/magento cache:clean && php bin/magento cache:flush

and

php bin/magento setup:static-content:deploy 

and make sure the permissions (777) are ok on /pub/static/frontend, the command of permission is:

chmod -Rf 777 pub/static/frontend

Yesterday was released a new release of Pearl theme, you can update the theme.

• user59036: I'm confused. If it's a server issue, why aren't the errors consistent. If I hit refresh a few times it eventually loads fine.
• St3phan: There are no server problems, but if you did not run the deploy static content command when you refresh the page it compiles automatically, but it can block automatic compilation due to too much load
• St3phan: The recommendation is to deploy to static content to better load
• user59036: Ran all commands. Errors went away on first SHIFT-REFRESH, but immediately came back on subsequent page loads.
• St3phan: You must clear cache browser

Answer 2

To anyone finding this in the future. My issue was around having a ShopperApproved integration.

I was able to narrow this down by disabling all extensions and then enabling them one at a time until the issue returned. After this I was able to say for certain that it was the ShopperApproved integration.

I then went into that extension and commented out all JS code that was added to the page. I then uncommented it file by file to see which was causing the issue.

In my case there were three different places that were an issue, but they all involved using script to add an external JS file to the HTML head. That JS file loaded jQuery if it wasn't found.

My solution was to wrap that code into the windows onload event so it would fire after all other JS. There is probably a better solution, but this worked. Since the issue was specific to my code base I will refrain from adding specific code here.

• Wren: Please accept this answer.

Answer 3

Please run the following commands,

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Answer 4

This can happen when the $ variable is not set to be jQuery but some other framework. You could try why you enter $ in your console.

Apparently, when you refresh the page, one of the two wins and gets assigned to the $ variable randomly.

You could fix this in the code by putting:

(function ($) { 
 // Your code
}(jQuery));

around the code that needs to be executed. This makes sure $ refers to jQuery.

• user59036: If I put $ in the console it returns fine. In face one of the lines that throws an error returns properly from the console ($.datepicker.RFC_2822) and it's wrapped in a require function: require([ "jquery", "jquery/ui" ], function($){ }); Would it help if you saw the site? review-stars-j2fvoyq-mqbydmn4mmpdk.us.magentosite.cloud/…