Endless scrolling in NextJS prod bundle

[ianboyle]

During Production the Embla Carousel Stops at the end of scroll, but once deployed it continues forever without stopping. Am I missing something?

[davidjerleke]

Hi @ianboyle,

Thanks for your question. Embla doesn’t do anything different based on the environment (dev or prod), so it’s most likely not a bug with Embla. It’s likely either expected behavior (but you may have missed that part in the documentation explaining this), or related to something with a faulty setup.

It’s not clear to me what you mean by endless scrolling? Care to share a screen recording?

Best, David

[ianboyle]

@davidjerleke

Thanks for responding! Sorry I did not mean to infer a bug with Embla itself, I am just at a loss for what is happening, although I highly suspect I am missing something or using incorrect syntax. Basically I want it to end scrolling after the last Slide div. In production it stops, but in the attached zipped screen recording you will see in deployment I can scroll forever.

I appreciate any input. Sorry for the disturbance.

Shredding Sassy - Brave 2022-10-14 13-44-34.zip

[taskrider2022]

I have the same Problem.

If I run the Slider on the locale development environment all is fine and it will be stop at the last visible item. If build the app I can scroll and the slider won't stop at the last item.

It's the same construction like the author.

[davidjerleke]

@ianboyle or @taskrider2022 could any of you share a link where the problem is present as well as the code?

Because it’s impossible for me to debug if I don’t know how your setup looks like, or if you can’t share any substantial information except a screenshot with fragments of your code.

Thanks in advance, David

[taskrider2022]

I cant grant access to the page because is a not a public page yet.

This is the environment I use:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@heroicons/react": "^2.0.10",
    "@hookform/resolvers": "^2.9.0",
    "@next/bundle-analyzer": "^12.1.6",
    "@react-spring/web": "^9.5.0",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.1",
    "@tailwindcss/typography": "^0.5.2",
    "@tanstack/react-query": "^4.0.10",
    "axios": "^0.27.2",
    "babel-plugin-macros": "^3.1.0",
    "body-scroll-lock": "^4.0.0-beta.0",
    "classnames": "^2.3.1",
    "cookie": "^0.5.0",
    "cookies-next": "^2.0.4",
    "cross-env": "^7.0.3",
    "crypto-hash": "^2.0.1",
    "date-fns": "^2.29.3",
    "drupal-jsonapi-params": "^2.0.0",
    "embla-carousel-autoplay": "^7.0.1",
    "embla-carousel-class-names": "^7.0.1",
    "embla-carousel-react": "^7.0.1",
    "html-react-parser": "^3.0.4",
    "lodash": "^4.17.21",
    "next": "^12.2.5",
    "next-drupal": "^1.4.0",
    "next-i18next": "^12.0.0",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-countup": "^6.3.0",
    "react-dom": "^18.2.0",
    "react-gtm-module": "^2.0.11",
    "react-hook-form": "^7.31.3",
    "react-intersection-observer": "^9.3.5",
    "react-masonry-css": "^1.0.16",
    "react-query": "^3.38.1",
    "sharp": "^0.30.4",
    "tailwindcss-hyphens": "^0.1.0",
    "vanilla-lazyload": "^17.8.3",
    "yaml": "^2.1.1",
    "yup": "^0.32.11"
  }

I try to describe my problem:

Run the app on local machine with HOT module reload for development The slider stops the translate3d function on the last item on items right side on scrolling.

Run the app on staging server after build the app or if u run it in next preview mode The slider won't stop on the last item right side.

This is the simplified used markup In the production code the items will be generate via children items

export const Carousel = ({ children }): JSX.Element => {
  const [emblaRef, embla] = useEmblaCarousel({
              loop: false,
              containScroll: 'keepSnaps',
              dragFree: true,
            });
  return (
    <div className="relative w-full">
     <div className="w-full overflow-hidden" ref={emblaRef}>
      <div className="flex gap-6">

       {/* normally render a children array with the following markup */}
       <div class="masonry-item flex-[0_0_73%] md:flex-[0_0_60%] lg:flex-[0_0_42%]">
        <a href="/startseite">
         <div class="masonry-media grid grid-rows-[228px_1fr] sm:grid-rows-[350px_1fr] lg:grid-rows-[267px]">
          <div class="relative h-full">
           <img src="https://via.placeholder.com/150" class="w-full h-full" />
          </div>
          <h3 class="h5 relative pt-6 pr-8">
           <span class="text-brandBlueDark">Usedomer Norden</span>
           <span class="icon-arrow swing-brandBlueLight-icon bottom-1 text-[16px] lg:bottom-[7px]" />
          </h3>
         </div>
        </a>
       </div>

       <div class="masonry-item flex-[0_0_73%] md:flex-[0_0_60%] lg:flex-[0_0_42%]">
        <a href="/startseite">
         <div class="masonry-media grid grid-rows-[228px_1fr] sm:grid-rows-[350px_1fr] lg:grid-rows-[267px]">
          <div class="relative h-full">
           <img src="https://via.placeholder.com/150" class="w-full h-full" />
          </div>
          <h3 class="h5 relative pt-6 pr-8">
           <span class="text-brandBlueDark">Usedomer Norden</span>
           <span class="icon-arrow swing-brandBlueLight-icon bottom-1 text-[16px] lg:bottom-[7px]" />
          </h3>
         </div>
        </a>
       </div>

       <div class="masonry-item flex-[0_0_73%] md:flex-[0_0_60%] lg:flex-[0_0_42%]">
        <a href="/startseite">
         <div class="masonry-media grid grid-rows-[228px_1fr] sm:grid-rows-[350px_1fr] lg:grid-rows-[267px]">
          <div class="relative h-full">
           <img src="https://via.placeholder.com/150" class="w-full h-full" />
          </div>
          <h3 class="h5 relative pt-6 pr-8">
           <span class="text-brandBlueDark">Usedomer Norden</span>
           <span class="icon-arrow swing-brandBlueLight-icon bottom-1 text-[16px] lg:bottom-[7px]" />
          </h3>
         </div>
        </a>
       </div>

       <div class="masonry-item flex-[0_0_73%] md:flex-[0_0_60%] lg:flex-[0_0_42%]">
        <a href="/startseite">
         <div class="masonry-media grid grid-rows-[228px_1fr] sm:grid-rows-[350px_1fr] lg:grid-rows-[267px]">
          <div class="relative h-full">
           <img src="https://via.placeholder.com/150" class="w-full h-full" />
          </div>
          <h3 class="h5 relative pt-6 pr-8">
           <span class="text-brandBlueDark">Usedomer Norden</span>
           <span class="icon-arrow swing-brandBlueLight-icon bottom-1 text-[16px] lg:bottom-[7px]" />
          </h3>
         </div>
        </a>
       </div>

      </div>
     </div>
    </div>
  );
};

[taskrider2022]

This is on builded app or next preview mode

https://user-images.githubusercontent.com/112076899/196391298-41a4de8a-3d6c-4216-8cda-03f8e3f1b9c8.mov

This is on usage on run next dev

https://user-images.githubusercontent.com/112076899/196391781-b60b0783-92ef-4617-bc2b-36731189e656.mov

[davidjerleke]

@taskrider2022 what happens if you resize the browser in production? Is the endless scrolling still happening after a resize?

[taskrider2022]

Yes the problem still exists

[davidjerleke]

@taskrider2022 you should be able to create a reduced test case that reproduces the problem, no? For example you can create a static CodeSandbox without compilation and share the link.

I’m sorry but I have to use Chrome Dev Tools to see what’s going on, otherwise I can’t do any debugging. I’m not going to waste time guessing stuff about what you’re doing in your code or not, I only want to spend my time on something that will help us understand why this is happening and solve it.

Thanks for understanding, David

[ianboyle]

@davidjerleke

Live Site | https://sassy-prod.vercel.app/

Repo | https://github.com/ianboyle/sassy-prod

[taskrider2022]

@ianboyle thx for sharing your code ... my makes no others

[ianboyle]

@davidjerleke no problem! Sorry for delay, been busy with kids lol. I sincerely appreciate your help.

[davidjerleke]

@ianboyle there are multiple libraries involved in your code so it could be that they're conflicting somehow. Embla reads the getBoundingClientRect() of its container and slides when it initialises in order to calculate positions and similar. If other libraries affect these it could lead to issues. Have you tried disabling some of them and see what happens? Like framer-motion or react-scroll-parallax?

[ianboyle]

I tried to disable both of those with no success, it's an odd thing because when I run it in a dev environment it snaps back as it's designed to do. It only has this endless scroll when I deploy it. So when I run under local host it snaps back.

[davidjerleke]

@ianboyle did you try disabling them in dev mode or prod? I think you need to try the latter if you didn’t do that.

it's an odd thing because when I run it in a dev environment it snaps back as it's designed to do. It only has this endless scroll when I deploy it. So when I run under local host it snaps back.

Of course it’s possible that this is a bug with Embla but Embla doesn’t do anything different in its code based on the environment (dev/prod), so I would definitely start looking elsewhere.

My guess is that some library you’re using is doing something different in prod and dev mode, which is affecting element dimensions even if it’s happening so fast that it isn’t noticeable. If this is the case, Embla can’t pick up the correct dimensions of the container and/or the slides. So I would try removing stuff and building the production bundle and see if it starts working. I would literally try removing anything from animation libraries to next features like next image to find the culprit.

Because @taskrider2022 has the same problem it could be wise to see if you’re using the same libraries and if so what libraries. Maybe that could help us figure out what’s causing this.

[davidjerleke]

@ianboyle does the repository you linked to have restricted access? Or can I download it locally?

[dsaket]

I am facing the exact same issue described here on latest v7.0.3.

[davidjerleke]

@dsaket maybe you’re trying to be helpful but just saying you have the same problem without sharing more information isn’t helping much.

• Have you tried other versions?
• Are you also using NextJS?
• And would you mind making an effort to create a static CodeSandbox that reproduces the problem?

---

@ianboyle @dsaket @taskrider2022 just to be clear: The contribution guidelines clearly state that any bug report should have a CodeSandbox with a reduced test case.

If you don’t provide that, I suggest you make an effort and debug on your own so we can narrow it down and find the culprit. As I mentioned, try to remove libraries and isolate the problem. It could also help to list what libraries/frameworks you guys use to see if there’s a pattern.

• Are you all using NextJS?
• Have you tried downgrading Embla to version 6.0.2 and see if it makes any difference?
• Etc…

[dsaket]

@davidjerleke I tried with v6.2.0 and the issue went away. Thanks for the suggestion!! And yes I am using NextJS.

[davidjerleke]

@dsaket I still think there is some funky business going on with NextJS or another library causing Embla to not be able to read the correct dimensions. Downgrading isn’t an actual “solution“ but if it works that could help us find the culprit.

[ianboyle]

I reverted to v6.2.0 and it works as expected the same in dev as prod.

I am going to give this a try with React only and not Next JS to see if it has something to do with the Image link or a dependency.

[dsaket]

@davidjerleke that's the interesting thing...the issue only comes with the prod build and not with the dev build of NextJS.

[davidjerleke]

@davidjerleke that's the interesting thing...the issue only comes with the prod build and not with the dev build of NextJS.

@dsaket @taskrider2022, @0xIanB I'm able to reproduce the problem locally in prod mode with NextJS only. I have found something interesting:

• If I include the Embla script locally in the project, in other words not as a npm package, it works in prod too.

Best, David

[davidjerleke]

Hi all (@0xIanB, @dsaket, @taskrider2022),

I just released v7.0.4. Bump your Embla package to the latest and give that a go. Let me know if the endless scrolling problem goes away in the NextJS prod bundle.

Best, David

[dsaket]

@davidjerleke yes it works as expected now....thanks for the quick patch and a big thanks for the amazing library!!!

[davidjerleke]

Thanks for confirming that the patch works @dsaket!

To be fair, I still don’t think this was an actual problem with Embla. I literally didn’t change a single line of actual code to fix this, I just pointed the main property in the package.json to the UMD file instead of CJS (commonJS). The bug only occurred in the NextJS prod bundle and I wasn’t able to reproduce it in any other context. It was as if the NextJS compiler altered the Embla code in some weird way.

Anyway, enjoy.

Best, David

[davidjerleke]

Solved in v7.0.4.