drag with nextjs build

[rozhover]

hello, thanks for the great slider. the drag works great with nextjs in dev mode, but it's not working with nextjs build. the width of the slides aren't calculating properly and get stuck in between transition after drag end. i don't see any errors in the console. i'm not sure but could maybe be something with the package file? not sure if this is helpful but i came across this, an issue with cjs file with dev/build on nextjs here thanks!

[rcbyr]

Which version of keen-slider do you use?

[rozhover]

6.8.3

[rcbyr]

Hi @rozhover, have you tried the ResizePlugin (https://keen-slider.io/examples#resize). If that doesn't fix your problem, it would be very helpful if you could share your code or create a reproducible example?

[sunygao]

hi @rcbyr, i'm also seeing this issue using keen slider 6.8.2. in addition to the issues with dragging, prev(), next() and goToIdx() functions also seem to be skipping slides. this issue only occurs with the statically generated next.js build and appeared after when we upgraded to next 12.3.x (tho it's worth noting that the issue doesn't show up in 12.3.2-canary.19).

i tried your suggestion above but wasn't able to fix the issue. here's an example configuration that we're using:

useKeenSlider({
    duration: 400,
   dragSpeed: 0.5,
  initial: 0,
    selector: '.slide',
    slides: {
      origin: 'center',
      perView: 'auto',
      spacing: 0,
    },
    breakpoints: {
      (min-width: 600px): {
        detailsChanged: (slider) => {
         ...
        },
      },
      (min-width: 1200px): {
        slides: {
          spacing: spacerValue,
          origin: 'center',
          perView: 'auto',
        },
      },
    },
    slideChanged: () => {
      ...
    },
    animationStarted: (slider) => {
      ...
    },
 });

any insights are much appreciated! thank you!!

[griffan113]

I'm facing this issue too with Nexjs 12.3.1 and keen slider 6.8.3

[sunygao]

i investigated further and it seems that the issue is only happening when typescript is also being used swcMinify: true is added to next.config.js. i've created a reproducible example here.

to reproduce, run:

yarn
yarn build && yarn start

result:

https://user-images.githubusercontent.com/1229178/201754053-5ba3df68-2b47-4f7b-9fa2-252d325db787.mov

[Marsony]

You shall try to preload your component with next/dynamic with { ssr: false } option

[rcbyr]

Thank you very much for pointing out this problem to me. Thanks especially to @sunygao for creating a reproducible example. I have created a fix for version v6.8.4 and hope it works for you.

It's really strange behavior and I'd love to dig deeper into this problem, but unfortunately I don't have the time right now. If you take a look at my fix, you will see that I made a workaround to avoid startPosition being a reference of endPosition. Since endPosition is a number, I'm not sure why swcMinify made it a reference. Maybe I'm missing something.

[rcbyr]

Sorry, it doesn't work after all. It seems that my "console.logs" in combination with the line of code I changed prevented this problem. I'll take another look at it.

[rcbyr]

I have released v6.8.5. Looks good to me now.