Type 'IterableIterator<number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher

Question

I'm trying to evolve with this Slider, but I get the following error when using TypeScript React in this Next.js project:

"Type 'IterableIterator' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher."

The code is this:

import { useKeenSlider } from 'keen-slider/react'
import React, { useState } from 'react'
import 'keen-slider/keen-slider.min.css'
import './styles.css'

export default function Slider() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [loaded, setLoaded] = useState(false)
  const [sliderRef, instanceRef] = useKeenSlider({
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel)
    },
    created() {
      setLoaded(true)
    }
  })

  return (
    <>
      <div className="navigation-wrapper">
        <div ref={sliderRef} className="keen-slider">
          <div className="keen-slider__slide number-slide1">1</div>
          <div className="keen-slider__slide number-slide2">2</div>
          <div className="keen-slider__slide number-slide3">3</div>
          <div className="keen-slider__slide number-slide4">4</div>
          <div className="keen-slider__slide number-slide5">5</div>
          <div className="keen-slider__slide number-slide6">6</div>
        </div>
      </div>
      {loaded && instanceRef.current && (
        <div className="dots">
          {[
            ...Array(instanceRef.current.track.details.slides.length).keys()
          ].map(idx => {
            return (
              <button
                key={idx}
                onClick={() => {
                  instanceRef.current?.moveToIdx(idx)
                }}
                className={'dot' + (currentSlide === idx ? ' active' : '')}
              ></button>
            )
          })}
        </div>
      )}
    </>
  )
}

I followed the Keen Slider documentation, but the example was in JavaScript. Because I'm using TypeScript, I don't know how to solve this problem.

Answer 1

TypeScript code is transpiled to JavaScript. TypeScript developers have to make a decision which version of JavaScript they want to target. Choosing a lower version means that the code can be executed in older browsers, ultimately reaching a larger user base. Developers can still use modern JavaScript features, as long as these features can be downleveled to older JavaScript versions.

Most modern JavaScript features can be emulated in lower versions, but we have to be explicit when dealing with IterableIterator. If you want to write code that depends on IterableIterator, you have to either increase your target version or set downlevelIteration to true.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015"
    // or
    "downlevelIteration": true
  }
}

---

Further resources:

• Why is downlevelIteration not on by default?