undefined is not an object

[richyrb00]

Describe the bug We use error tracking software on our website and an event that is popping up regualrly relates to

'undefined is not an object' f(t&&Object.prototype.hasOwnProperty.call(t,"addEventListener")){T(t,"addEventListener",function(o){var i={component:"".concat(e,".prototype

Crashed in non-app: ./node_modules/swiffy-slider/src/swiffy-slider.esm.js in handleIndicators

To Reproduce unfortunatly we cannot provide steps to reproduce due to it been an intermittent issue.

Expected behavior expected it not to occur?

Screenshots N/A

Desktop (please complete the following information):

• Majority on Safari v15+
• Mac (18%)

Smartphone (please complete the following information):

• Safari Mobile 15.5 and 15.6 (57%)
• Iphone (74%)

Additional context Our application is on NEXTJS.

and example of how swiffy is rendered in a component.

import React, { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import Container from '../../Container';
import Image from 'next/image';
import Headings from '../../heading/Heading';
import { swiffyslider } from 'swiffy-slider';

function Classic({ data, title, cta }) {
  const { _metadata, content } = data.classic;

  const sliderRef = useRef()

  let dotsClass = 'desktop:hidden bg-dark'

  useEffect(() => {
    swiffyslider.initSlider(sliderRef.current)
  }, [])

  return (
    <section id={_metadata.uid} className="content-list bg-dawn-grey-10 standard-padding">
      <Container fullPage={false}>
        <Headings headingContent={title} headingClassName='h4 md:h2 text-center mx-12 mb-10' />
        <div className="block md:flex flex-row flex-wrap w-full justify-between mx-auto">
          <div className={`content-list-slider swiffy-slider slider-nav-autoplay slider-nav-visible slider-indicators-sm`} data-slider-nav-autoplay-interval={3000} ref={sliderRef}>
            <ul className="slider-container" tabIndex={0}>
              {content.map((item, index) => {

                return (
                  <li className="flex-1 px-4 mb-2.5" key={index}>
                    <div className="relative">
                      <Image
                        src={`${item.image.url}?disable=upscale`}
                        width={274}
                        height={204}
                        objectFit={"cover"}
                        layout={"responsive"}
                        alt={item.image.title.replace(/\.[^/.]+$/, "")}
                      />
                    </div>
                    {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == true ? <OverlayIcon icon={item.overlay_content.icon} /> : ""}
                    {item.overlay_content.show_overlay == true && item.overlay_content.show_icon == false ? <OverlayText text={item.overlay_content.text} /> : ""}

                    <h3 className="sh10 md:sh9 text-center mb-2">{item.title}</h3>
                    <p className="text-center max-w-sm mx-auto body-r">{item.description}</p>
                  </li>
                )
              })}
            </ul>

            <div className={`slider-indicators slider-indicators-round z-30`}>
              {content.map((item, index) => {
                return (
                  // set first indicator to 'active'
                  <button key={`slider-indicator-${index}`} className={`${index === 0 ? 'active' : ''} ${dotsClass} slider-indicator`}>
                    <span className="sr-only">Slide {index}</span>
                  </button>
                )
              })}
            </div>
          </div>
        </div>
        <CallToAction show={cta.show_cta} data={cta} />
      </Container>
    </section>
  )
}```

[nicped]

Hi - thanks for reporting.

Seems like Safari isolated issue. What ES target are you using in your build scripts?

Seems like the handleIndicators method is called after a scroll but the slider is no longer in the document - could have been unloaded? This is the method: handleIndicators You can try to add to the source a null guard: if (!sliderElement) return;

I will try to test on Safari mobile to see if it is reproducable.

[richyrb00]

@nicped i see @Andscowal has created a PR for this could we get that reviewed and merged if accepted?

[nicped]

I have created a new pull request containing this change and released a 1.6.0 with this change and a couple of other minor fixes.