Why is Chrome able to load assets that Firefox is not?

Hi all.

I have a website https://stable.stable-demos.com/

In Chrome there’s no error and everything works as it should ( WHEN I’M LOGGED INTO THE DASHBOARD).

In Firefox, there’s an error that swiper.js is not defined (even though the file is found in Chrome), and there are some warnings that Chrome isn’t displaying unless I’m looking at the site incogneto via Chrome.

Cache is clear, plugins disabling one by one…

Does anyone know where there would be a discrepancy like this? If so, how would I go about fixing it?

Thank you!

When we look at your site, how do we know if it is working? It appears to work in Chrome and Firefox for me so perhaps you need to tell us more.

Do you know how to look at the console? In both browsers I get a message saying that Swiper is not defined in:

var mySwiper = new Swiper ('.swiper-container', {

There are other errors too so you need to look at the console for errors. The difference between the browsers might be explained by the other errors.

I do not see “swiper.js” anywhere in the HTML source. Perhaps you are misquoting the error message. It is very important to be careful about the correct exact error message.

#1: This error occurs in both Chrome and Firefox.

#2: Your code appears to be deferring the loading of the external javascript, which i’m going to assume means we’ve got a failed race condition. Your inline code attempts to execute before the deferred load, so Swiper is not loaded at time of execution.

Delay your code execution until the load event fires, or remove the deferral of your reference.

2 Likes

Okay, I TOTALLY get what you’re saying and will look this over tomorrow. Thank you for taking a look at this!

Hello,
The site is working when the swiper console error is gone. While it is not, my logo automatically collapses on itself instead of collapsing at 20% from the top (waypoint). An example of this logo working is here: https://codepen.io/brittany-golden/pen/OGxbxq.

Yes, I do know how to look at the console. That is why I am writing about the console error “swiper is not defined”.

Swiper is loaded, but you may have searched for swiper.js, when I am running swiper.min.js.

The issue that I think might be happening is that for some reason jQuery is loading via the theme on line 78 of the source code, while swiper is coming in on like 75.

Why this doesn’t bother the site when I’m logged in, but breaks when I’m logged out, I do not know.

More importantly, these codes are being loaded out of order, but in my functions.php they are being loaded in order (ie: JS first, then swiper.min.js). I am not sure how to force the order so swiper loads after jQuery.

The theme is loading jQuery, and I am loading my swiper.min.js file via the functions.php.

Lastly, the error message is accurate: I’ve posted two a side by side of me logged in, vs incogneto mode. The error and break happens ONLY when I am not logged in.

Cache is flushed, plugins were disabled.

swiper-is-not-defined

I hope that helps. Thanks for looking into it.

actually, the theme appears to be loading both:

<script type='text/javascript' defer='defer' src='https://i6y2u5q3.stackpathcdn.com/wp-content/themes/sekko/assets/js/modules/plugins/swiper.min.js?ver=1551808067'></script>
(Line 899 of your generated code.)

Again, the problem is that you are deferring the script load, but not the invocation. Note that your codepen invokes its code inside a jQuery.ready …

1 Like

That is from the original post.

That is not what you said originally.

I did because that is what you said.

Thanks Hutley - I removed the defer, which appears to have remedied the swiper not defined error. For some reason, the animations still run immediately on load for the logo on load when they should wait for the waypoint.

The oddity being that this works correctly when I’m logged into the WP dashboard viewing the site.
This does not work correctly (runs immediately) when I am incogneto or not logged in.

If you have any ideas I thank you in advance!

That’s the error in the console.

You are repeating yourself. More important than that, I don’t understand what you are trying to say here.

I will assume you now understand that the error message in the original post was incorrect. Initially I tried to gently indicate the problem but you did not get it. I hope you now understand the importance of being accurate. So I think I have said more than is necessary on the subject.

Samuel, I don’t need you to “gently” indicate anything. My initial post was plenty enough to get an accurate answer from Hutley. If you needed more information you can simply ask, and I will answer. If my answers are offensive to your sensibilities (or you’re too busy being “right” vs helpful), I would suggest you simply move along to another question.

EZPZ :v:

Okay. So in the future I will be more direct.

Hi @birdiegolden, as you’re using wordpress you can actually specify the dependencies when enqueuing a script, so it is guaranteed that they’re getting loaded in the desired order; e.g.

wp_enqueue_script(
  'swiper', 
  get_stylesheet_directory() . '/scripts/swiper.min.js', 
  [ 'jquery' ]
);

(Of course, this only works if all scripts are getting registered / enqueued this way – if your theme just prints out script tags you might end up with multiple versions of jQuery being loaded and stuff.)

PS: Just had a look at your source, it seems you are loading jQuery at least twice already – once before, and once after the swiper library. That may certainly be part of the problem too, so make sure to consistently use wp_enqueue_script(), especially if you have plugins that are adding scripts too.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.