Jetpack: Carousel: Uncaught TypeError: Cannot read property 'split' of undefined in jetpack-carousel.js below 768px

[galbaras]

Steps to reproduce the issue

Visit https://www.ronitbaras.com/family-matters/parenting-family/hush-little-baby-good-sleeping-habits-for-kids/ (or any other post) with the Chrome code inspector open and viewport width less than 768px.

This can be done either by manually changing the viewport size or by turning on responsive mode and choosing a narrow device.

What I expected

No console errors.

What happened instead

Chrome console shows this:

Uncaught TypeError: Cannot read property 'split' of undefined jetpack-carousel.js?ver=20170209:456
at HTMLImageElement. (jetpack-carousel.js?ver=20170209:456)
at Function.each (jquery.js?ver=1.12.4:2)
at a.fn.init.each (jquery.js?ver=1.12.4:2)
at processSingleImageGallery (jetpack-carousel.js?ver=20170209:440)
at HTMLDocument. (jetpack-carousel.js?ver=20170209:1462)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

[jeherve]

Related: #6638

Does this still happen when you deactivate WP Fastest Cache?

Could you also let me know how you inserted the images into the posts? Did you use a specific plugin / builder tool to create that post?

Thanks!

[galbaras]

Disabling WP Fastest Cache (+ Premium) and even activating Cloudflare's Development Mode makes no difference :(

I insert images using Add Media, although I have EWWW Image Optimizer, Media File Renamer and Regenerate Thumbnails installed and EWWW injects code for serving WEBP images conditionally in the front end.

[jeherve]

Thanks for the extra details!

EWWW injects code for serving WEBP images conditionally in the front end.

Could you let me know if the error remains when you turn this off?

[galbaras]

No, it goes away.

Alas, I need this for serving WEBP images through Cloudflare, because using .htaccess redirect rules doesn't work with a CDN :(

Not being a front-end person, this brings us to the edge of my skills, but I suspect that Jetpack is referring to an image as it was defined in the HTML, and that image is replaced in the meantime.

[jeherve]

No, it goes away.

Excellent, that means that the markup generated by EWWW trips the Carousel.

<p><noscript data-img="https://www.ronitbaras.com/wp-content/uploads/2008/06/clip-image00217.jpg" data-webp="https://www.ronitbaras.com/wp-content/uploads/2008/06/clip-image00217.jpg.webp" data-alt="Sleeping baby" data-height="278" data-width="409" data-class="alignleft" data-style="border-width: 0px;" class="">&lt;img class="alignleft" style="border-width: 0px;" src="https://www.ronitbaras.com/wp-content/uploads/2008/06/clip-image00217.jpg" alt="Sleeping baby" width="409" height="278" border="0"&gt;</noscript><img src="https://www.ronitbaras.com/wp-content/uploads/2008/06/clip-image00217.jpg.webp" alt="Sleeping baby" height="278" width="409" class="alignleft" style="border-width: 0px;"></p>

Alas, I need this for serving WEBP images through Cloudflare, because using .htaccess redirect rules doesn't work with a CDN :(

Until this is solved, you could enable Jetpack's Photon feature, and let it serve WebP images for you in browsers that support it. :)
https://jetpack.com/2015/12/04/webp-support/

[galbaras]

Seems like the EWWW code is causing other issues, so I've asked the developer to take a look. Should get back to me in a day. Any insights on this should help, though.

[galbaras]

Looks like this issue only happens when I'm logged in, so no big deal. The EWWW author has made some nice progress and removed some attribute conflicts, so this issue can be put on a back burner for now.

[jeherve]

Excellent, thanks for the update.

[nosilver4u]

Apparently my fix for Jetpack way back when was horribly incomplete, not sure what I was thinking. I've now made sure EWWW IO properly handles the data-orig-file, data-large-file, and data-medium-file attributes.

[jeherve]

@nosilver4u Thank you, and thanks for the update!