16

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.

Ton Almeida
  • 173
  • 2
  • 2
  • 9
  • 2
    You are transpiling into a target version of JavaScript which does not support iterating over `IterableIterator`. Go into your tsconfig.json and either change target to `"target": "es2015"` or set `"downlevelIteration": true` – Tobias S. Oct 29 '22 at 17:11

2 Answers2

38

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:

Tobias S.
  • 21,159
  • 4
  • 27
  • 45
  • 1
    I got this error when attempting to use the spread operator on a JS Map() inside a TypeScript project. I added the es2015 target (it was previously set to es5) in my tsconfig.json and it fixed the problem. Thanks – raddevus Nov 02 '22 at 12:26
  • 2
    For some reason I still intermittently get this error even after setting `downlevelIteration: true`. Our target is es5. – cyclingLinguist Feb 17 '23 at 14:22
  • I was getting this error despite having all targets set to either `ES2015` or `ES6`. `ES6` is supposed to be equivalent to `ES2015` according to every site I read, but the error didn't go away until I changed everything to `ES2015`. – Joe Lapp May 12 '23 at 21:31
2

I had the same issue, I added a target option as already suggested here:

{
  "compilerOptions": {
    "target": "ES6"
  }
}

But I also had to reset my Nextjs cache before next build worked as expected:

# next build doesn't work
rm -rf .next 
# next build works
cglacet
  • 8,873
  • 4
  • 45
  • 60