Options object doesn't work after migration #79
Comments
|
Hi Damian (@damian-balas), Thank you for your question. I'm not sure why you get this error because I can't reproduce it. I just created a CodeSandbox with the same options and it's working just fine. You haven't provided any of your code so please take a moment to reproduce the error by forking the CodeSandbox above. Alternatively, you can provide your code and the contents of your Kindly, |
|
Ok, I'll try my best :) |
davidjerleke
added
awaiting response
|
@davidcetinkaya Here is some additional info: package.json dependencies: "dependencies": {
"@reduxjs/toolkit": "^1.3.6",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "0.19.2",
"date-fns": "^2.14.0",
"embla-carousel": "^3.0.21",
"framer-motion": "^1.11.1",
"i18next": "^19.4.5",
"i18next-browser-languagedetector": "^4.2.0",
"i18next-http-backend": "^1.0.13",
"i18next-localstorage-cache": "^1.1.1",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.5.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"styled-components": "^5.1.0"
},EmblaCarouselWrapperComponent: const TestimonialsSection = styled.section`
position: relative;
background-image: linear-gradient(45deg, #53b5be, #3882a8);
`;EmblaCarouselComponent: import React, { useEffect } from 'react';
import { useEmblaCarousel } from "embla-carousel/react";
import styled from 'styled-components';
import TestimonialsSlide from 'components/atoms/TestimonialsSlide';
import { maxWidthStyle } from 'constant';
const Testimonials = [
{
name: 'John Doe',
role: 'Student',
text:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ea at nulla, fugiat nostrum esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat nostrum esse sit amet.',
},
{
name: 'John Travis',
role: 'Student',
text:
'Dolorum nesciunt praesentium nihil doloribus dolorem ea at nulla, fugiat nostrum esse.',
},
{
name: 'Jonas Schmidt',
role: 'Student',
text:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum nesciunt praesentium nihil doloribus dolorem ea at nulla, fugiat nostrum esse.',
},
{
name: 'Alice Adams',
role: 'Student',
text:
'Lorem ipsum dolor sit amet consectetur. Dolorum nesciunt praesentium nihil dolorem ea at nulla, fugiat nostrum esse.',
},
];
const TestimonialsCarousel = () => {
const [EmblaCarouselReact, embla] = useEmblaCarousel({
align: 'start',
slidesToScroll: 1,
loop: true,
});
const scrollNext = () => {
embla.scrollNext();
};
const scrollPrev = () => {
embla.scrollPrev();
};
return (
<Container>
<CarouselButton type="button" onClick={scrollPrev}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="16"
viewBox="0 0 25 16"
>
<g
fill="none"
fillRule="evenodd"
stroke="#1d386b"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M24 8H1M8 15L1 8l7-7" />
</g>
</svg>
</CarouselButton>
<CarouselButton type="button" onClick={scrollNext}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="16"
viewBox="0 0 25 16"
transform="scale(-1,1)"
>
<g
fill="none"
fillRule="evenodd"
stroke="#FFF"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
>
<path d="M24 8H1M8 15L1 8l7-7" />
</g>
</svg>
</CarouselButton>
<EmblaCarouselReact>
<div style={{ display: 'flex' }}>
{Testimonials.map(({ name, text, role }, index) => (
<TestimonialsSlide
key={name}
name={name}
text={text}
role={role}
index={index}
/>
))}
</div>
</EmblaCarouselReact>
</Container>
);
};
const Container = styled.div`
transform: translateY(-3rem);
${maxWidthStyle};
`;
const CarouselButton = styled.button`
margin: 0;
margin-left: 0.8rem;
height: 3rem;
width: 3rem;
border: none;
background: none;
font-size: 1.8rem;
line-height: 2.5rem;
display: block;
color: #ffffff;
text-align: center;
`;
export default TestimonialsCarousel;And the slide for Carousel: import React from 'react';
import styled from 'styled-components';
import { breakPoints } from 'constant';
const QUOTE_COLORS = ['#53B5BE', '#47aabc', '#3d9db7', '#398fb0', '#3882a8'];
const TestimonialsSlide = ({ name, text, role, index }) => {
const t = 'test';
return (
<Wrapper>
<SlideContainer>
<QuoteIconWrapper>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
width="35px"
height="35px"
viewBox="0 0 124 124"
xmlSpace="preserve"
>
<g>
<path
fill={QUOTE_COLORS[index % QUOTE_COLORS.length]}
d="M49.8,29.032c3.1-1.3,4.4-5,3-8l-4.9-10.3c-1.4-2.899-4.8-4.2-7.8-2.899c-8.5,3.6-15.8,8.3-21.6,14 C11.4,28.532,6.6,36.232,4,44.732c-2.6,8.601-4,20.3-4,35.2v30.7c0,3.3,2.7,6,6,6h39.3c3.3,0,6-2.7,6-6v-39.3c0-3.301-2.7-6-6-6 H26.5c0.2-10.101,2.6-18.2,7-24.301C37.1,36.133,42.5,32.133,49.8,29.032z"
/>
<path
fill={QUOTE_COLORS[index % QUOTE_COLORS.length]}
d="M120.4,29.032c3.1-1.3,4.399-5,3-8l-4.9-10.199c-1.4-2.9-4.8-4.2-7.8-2.9c-8.4,3.6-15.601,8.3-21.5,13.9 c-7.101,6.8-12,14.5-14.601,23c-2.6,8.399-3.899,20.1-3.899,35.1v30.7c0,3.3,2.7,6,6,6H116c3.3,0,6-2.7,6-6v-39.3 c0-3.301-2.7-6-6-6H97.1c0.2-10.101,2.601-18.2,7-24.301C107.7,36.133,113.1,32.133,120.4,29.032z"
/>
</g>
</svg>
</QuoteIconWrapper>
<TestimonialText>{text}</TestimonialText>
<TestimonialAuthor>{name}</TestimonialAuthor>
{role && <TestimonialRole>{role}</TestimonialRole>}
</SlideContainer>
</Wrapper>
);
};
const QuoteIconWrapper = styled.div`
opacity: 0.7;
`;
const Wrapper = styled.div`
position: relative;
width: 100%;
flex: 0 0 100%;
@media (min-width: ${breakPoints.beforeTablet}) {
flex: 0 0 50%;
}
@media (min-width: 68em) {
flex: 0 0 33.33%;
}
`;
const SlideContainer = styled.div`
position: relative;
background-color: #ffffff;
margin: 1.5rem;
padding: 1rem;
border-radius: 15px;
box-shadow: 0 16px 24px -16px rgba(59, 142, 184, 0.25);
`;
const TestimonialText = styled.p`
color: ${({ theme }) => theme.txtColor};
font-size: 1rem;
line-height: 1.8;
font-style: italic;
::after {
content: '';
height: 3px;
width: 70%;
border-radius: 3px;
display: block;
margin: 1rem auto;
background-color: #f0f0f0;
}
`;
const TestimonialAuthor = styled.h4`
font-size: 1.2rem;
line-height: 1.2rem;
color: ${({ theme }) => theme.secondary};
text-align: center;
`;
const TestimonialRole = styled.p`
font-size: 1rem;
color: ${({ theme }) => theme.txtColor};
text-align: center;
margin: 0;
`;
export default TestimonialsSlide;I'm using framer-motion and react-router for routing with animation. I hope this helps. Thanks :) |
|
I have on route "/" my first emblaCarousel and on /some-route my second emblaCarousel If I am on /some-route and refresh the page, then I get this maximum stack size exceeded error If I am on "/" the emblaCarousel doesn't loop. If I go from "/" to "/some-route" I don't get maximum stack size exceeded error and the emblaCarousel works fine. (on "/" it's still broken) |
|
Just found out something. If I change to: It works fine. I can also do flex: 0 0 50%. But I CAN'T go below 50%. " maximum stack size exceeded error " still not fixed :/ I don't know what could be the problem there. |
|
Hi again Damian (@damian-balas), Thanks for the additional information. I will take a look at the provided details and get back to you when I’ve done so. In the meantime, please take a look at this issue that one of my users submitted some time ago. Seems like Best, |
|
I've already implemented exitBeforeEnter prop. 😞 |
davidjerleke
added
investigating
MORE INFOI found out that when you have only 4 slides and try to display 3 at the same time (width: 33.33% / flex: 0 0 33.33%) EmblaCarousel breaks. If I add more slides EmblaCarousel starts working again. I guess there are some issues with loop functionality when there are only few slides. |
|
Thanks for digging further and narrowing it down @damian-balas! I think I know why this is happening now. I’m guessing that only the React version of Embla suffers from this. When slides aren’t enough to loop Embla will pick that up and automatically fall back to loop false by re-initializing itself. I will look into this and get back to you when I’ve done that. Kindly, |
|
Awesome! I really want to use this package, because it's the smoothest one :) |
|
@damian-balas seems like my guess wasn't correct. The fallback to I think you should try to toggle components on and off to see if you can find what's causing this. If it suddenly starts working when you've deactivated a component you can narrow it down. I would start with Let me know if you find anything. Kindly, |
|
@davidcetinkaya the CodeSandbox example doesn't work for me.
Even the prev button is disabled
|
|
@damian-balas what do you mean by doesn't work? Can you drag the carousel? |
|
I can drag it, but it doesn't loop. As you can see in the first screenshot - there are blank rectangles. I can't drag it further. My OS - Ubuntu 18.04 |
|
I see. That's because Embla realizes that the slides are not enough for the loop effect to work. So it changes |
|
Then why does it work on your machine? 😕 |
|
How do you mean 😕? The CodeSandbox is working fine? |
|
No, the CodeSandbox doesn't work. You said:
If I understood it correctly, it works for you, right? |
UPDATEI have removed framer-motion. I still get Maximum stack size exceeded error 😕 |
This is expected behavior when you don't provide enough slides with enough width for the loop effect to work. There has to be enough slides to cover the gap needed when flipping slide positions, otherwise the carousel would flicker when looping. |
|
Ok, so 1 "bug" is solved. I'll just make it 50% instead of 33.33%. It would be nice if you could give a note about this in the docs. So anyone having this issue will know what's going on. I still have no idea what could cause the maximum stack size exceeded error. Could this possibly help you out?
|
It's actually stated in the docs 🙂. Take a look here:
Unfortunately, I can't see anything helpful from the screenshot 😕. |
|
@damian-balas does the previous and next buttons work for you? |
|
You're right, my bad! I didn't see it :)
|
No 😕 |
|
@damian-balas so the previous and next buttons also trigger the maximum call stack issue? |
|
No, they don't do anything. |
|
Is there a way to programmatically rerender/reinitialize the carousel? |
Yes, like so: embla.reInit({}) |
|
Ok, I'll try something and be back in a minute or so :) |
If I wait then for 3 seconds, I don't get this error. Maybe there is a problem like the counting failed because Embla didn't see any "slides" and it's stuck then? |
|
Do you get the error if you do it like this? useEffect(() => {
if (embla) {
embla.reInit({
loop: false,
align: 'start',
slidesToScroll: 1,
})
}
}, [embla])
This could be the case. Maybe there's no children there when you initialize embla for the first time. |
|
If I do it like this, the carousel works fine, but it's a nasty fix IMO 😕 There should be children, because my 'test code' looks like this: |
This comment has been minimized.
This comment has been minimized.
SOLUTIONI found the problem! |
|
Nice digging @damian-balas 😃! Let me know how it goes. I hope that this will solve it so you can enjoy the power of Embla Carousel. |
|
Ok, it works! You can put this information in the docs - "Might not work with react suspense". |
davidjerleke
added
not a bug
|
No worries. I’m glad you got it sorted @damian-balas 🙂.
I think a better approach would be to try to reproduce the issue in a CodeSandbox that uses React suspense, so I can understand why this is happening and try to fix this. That would be a nice addition. Thank you for reporting this. Kindly |
|
@damian-balas, I just realized something. If you want the loop effect to work with 4 slides when each slide is 1/3 wide, you have to use the following css: .slide {
flex: 0 0 33.33333%;
}
/* ...instead of */
.slide {
flex: 0 0 33.33%;
}This is because the carousel viewport is 100%, and Let me know if it helps! Best, |
Wow thanks! :) I had to do 33.35% to make it work. |
|
Hello again Damian (@damian-balas), I've recently released a patch fix with Embla version 3.0.23. If you don't mind you can try if react suspense still trigger the error you initially mentioned in this issue. Kindly, |
|
Hello, First of all, thank you very much for this amazing, slick carousel. Great work 🙂 I've recently encountered a very similar problem, so i thought it would be good to report it here. Imagine there are more than one instances of Embla in one page and they are inside a wrapper element, like a Now after opening the box, if you start dragging or interacting with the carousel, The "maximum call stack size exceeded" Error appears. It seems that if the Embla instance is not "visible/rendered" or at least is hidden with "display:none" at the page initial load, the error shows up. The solution i use until now is to hide the carousel by setting the wrapper elements height and max-height to "0" instead. It's not a big problem, just thought i'd mention it here if anybody has the same problem. Good luck and regards |
|
Hi @azeroth1993, Thank you. What version of Embla Carousel are you using? Beat, |
|
Hi David,
I’m using version “4.1.3” for react.
From: ***@***.***>
Sent: Wednesday, May 12, 2021 6:47 PM
To: ***@***.***>
Cc: ***@***.***>; ***@***.***>
Subject: Re: [davidcetinkaya/embla-carousel] Options object doesn't work after migration (#79)
Hi @azeroth1993<https://github.com/azeroth1993>,
Thank you. What version of Embla Carousel are you using?
Beat,
David
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#79 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOKDF6DWV5267Y6EU4IPJN3TNKEY3ANCNFSM4PFD5LSQ>.
|
|
Hi @azeroth1993, The issue you describe got some attention in #151 and a fix was released with v4.2.0. But I would recommend you to update to the latest version. Let me know how it goes. Best, |
|
@azeroth1993 have you had the change to read my response yet? |
|
Hello David,
I apologize for late response. Yes, i followed the suggestion explained at #151 issue and I'm going to first update to the latest version.
And if it doesn't work out, then the re-init method sounds good.
I'll let you know as soon as I get the results.
Best Regards
Get Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: David ***@***.***>
Sent: Friday, May 14, 2021 12:42:39 PM
To: davidcetinkaya/embla-carousel ***@***.***>
Cc: azeroth1993 ***@***.***>; Mention ***@***.***>
Subject: Re: [davidcetinkaya/embla-carousel] Options object doesn't work after migration (#79)
@azeroth1993<https://github.com/azeroth1993> have you had the change to read my response<#79 (comment)> yet?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#79 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOKDF6AVHZNN4FHWQFWR5BTTNTLPPANCNFSM4PFD5LSQ>.
|
|
@azeroth1993 no worries, I was just curious. Please note that you still have to run Best, |
|
That totatotally makes sense. You can't get measurements of something that's not there yet.
This hidden problem happened in my work place project, at https://mr-gamble.com/en/.
But in my personal website, I'm using embla as well and works perfectly.
Here is the link: https://flierland.ca/fa/billboard/%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D8%AF%D8%B1-%D9%88%D9%86%DA%A9%D9%88%D9%88%D8%B1-home-depot%D9%BE%D8%A7%D8%B1%DA%A9-%D8%B1%D9%88%DB%8C%D8%A7%D9%84
Kind Regards
Get Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: David ***@***.***>
Sent: Friday, May 14, 2021 1:01:01 PM
To: davidcetinkaya/embla-carousel ***@***.***>
Cc: azeroth1993 ***@***.***>; Mention ***@***.***>
Subject: Re: [davidcetinkaya/embla-carousel] Options object doesn't work after migration (#79)
@azeroth1993<https://github.com/azeroth1993> no worries, I was just curious.
Please note that you still have to run re-init when removing display: none. It's impossible for Embla to pick up the correct container and slide dimensions when any parent has display: none because these dimensions doesn't exist.
Best,
David
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#79 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOKDF6HCQRZDIU4HNOZUZB3TNTNULANCNFSM4PFD5LSQ>.
|
|
Nice to see a Try updating to the latest version and run Best, |
Options object doesn't work after migration from embla-carousel-react to embla-carousel/react
my config:
Loop doesn't work.
If emblaCarousel loads for the first time, after dragging I get "maximum call stack size exceeded" error.
It doesn't work on
embla-carousel-react v2.0.3either.I tried to migrate from version:
^1.3.3The text was updated successfully, but these errors were encountered: