Uncaught ReferenceError: width is not defined" on devicepx-jetpack.js?ver=201630

Hey Jeremy,

I see it on a Macbook Pro Retina, in Chrome/Safari & Firefox.

It happens on every page we use photon images.

We see the error in the console, the error occurs every second.

This is the cause of the issue:

getImgSize: function (img_src) {
		var new_img = new Image();
		new_img.onload = function() {
			var width = newImg.width;
			var height = newImg.height;
		}
		return [ width, height ];
	}

You can see the return from getImgSize where the width and height have not been defined.

getImgSize is called once, but the result is never used, so I think you can just remove this from the source?

Hi Jeremy,

Exactly the same as @cjbos, Macbook Pro Retina w/ Chrome. Every page with photon images and it occurs every second.

@cjbos that code is definitely some JavaScript voodoo. Oddly enough that code was added to fix a problem with squished images on Firefox when used on a retina screen. I can’t claim to fully understand why it fixes the issue on Firefox ( I have a few theories though ), but the results confirmed that it did fix the problem. Chrome did not have the problem with squished images.

After several test runs I’ve been able to reliably reproduce the console log errors ( I end up having to restart Chrome after each JS code change, if I don’t the errors won’t come up, even after changing back to the original JS code that cause them ). However I’ve only seen them on Chrome, I haven’t seen any console errors in Firefox ( currently on version 48 ).

I’ve started running tests with permutations of this code to look for a combination that will both fix the Firefox problem, and not generate console warnings. So far they have been tied together, fixing one breaks the other. Still looking though.

I think I answered most of the questions other than where the error is happening, which as others have said, is in the console, about once every second.

To me that JavaScript also looks wrong, because the width and height values being returned are not in scope, having been defined in the function. So I’m not sure how that code works for anybody on any browser.

I’m experiencing the same error. Any news on it?

@stefano As my colleague Joseph mentioned above, we’re working on a fix that will avoid generating those console warnings.

I’ll let you know as soon as we have news.

Hey folks,

I had the same exact issue and I fixed it for me so I thought to post about this it might help others too.

My problem was with the caching plugin that I was using and it had lazy-loading feature enabled. The reason I was getting the issue because JS was trying to set a width to an image that didn’t exist yet. My image was the very first thing in my page as thus before lazy-loading would try to load it my JS would attempt to set it a width and cause this problem.

What I did is

1. If you are using JetPack go ahead and disable Photon module for now
2. Disable lazy loading
3. Clear the cache(if you use DNS clear that cache too)
4. Disable the caching plugin
5. Go to your browser clear your cache and cookies for your website
6. Now try to visit your page again see if the error disappeared

7. If It does work then you may turn your caching & lazy-loading plugins
8. clear browser cookie and cache for your website
9. Now try to visit your page and see if you don’t get the error, if you don’t then keep your plugins enabled
10. If you get an error then repeat 1-6 and don’t enable your caching and lazy-loading plugins at this point.

Hope this helped someone.

I’ve just deployed an update to the Jetpack devicepx code to address this. The updated version shouldn’t generate any console log items and still fix the issue with Firefox + Retina squished images.

Hello,

Another way to prevent the devicepx-jetpack.js file from being loaded:

https://www.swashcap.com/blog/2013/07/removing-devicepx-jetpack-js-for-wordpress/

Best regards,
Gabriel