Comments (10)
Have you guys used this on server side rendering project? styles applied on it is differently on server and client. Due to that checksum is not matching.
from react-responsive-carousel.
Hi @SolutiaMR, I have all the options working at http://react-responsive-carousel.js.org/storybook/
Did you load the css? Do you see any errors in the browser console? Something else might be wrong or breaking the carousel.
from react-responsive-carousel.
@pankaj417 I haven't used with SSR but a few other users have. AFAIK it's working fine. If you provide me more details I might be able to help. Cheers
from react-responsive-carousel.
@leandrowd : I am getting this. Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) -transform:translate3d(0%,0,0);-moz-tran
(server) -transform:translate(0%,0);-moz-transfor
from react-responsive-carousel.
@leandrowd Thank you for your speedy response. I might be loading the css incorrectly. I see a lot of scss files in the repository. Are there any vanilla css files I can use? Or which scss file do I need?
from react-responsive-carousel.
Hi @SolutiaMR, you can find the css at lib/styles
, there is a carousel.css
or carousel.min.css
. If your css loader allows to load css directly from node_modules
, you will be able to load from react-responsive-carousel/lib/styles/carousel.css
, otherwise you will need to copy the css to your filesystem and import as if it was from your project.
from react-responsive-carousel.
@pankaj-onerent, I know why it's happening! There is a check to whether the env you are running supports translate3d or not, and node clearly doesn't. This is just a warning and you can still use the carousel without issues. I can solve it later, but no ETA for now...
from react-responsive-carousel.
@leandrowd : yes it is working but due to mismatch in html on server and client. loosing the benefits of Server side rendering.
from react-responsive-carousel.
@pankaj417, I've removed the check that was causing your problem. If you get the latest version you won't get that warning anymore.
@SolutiaMR, I'm closing this issue as your issue was caused by the missing css. Feel free to re-open if the problem persists after loading the css.
from react-responsive-carousel.
@leandrowd : thank you so much for the help. I will check it and confirm.
from react-responsive-carousel.
Related Issues (20)
- InfiniteLoop Issue HOT 1
- Swipe speed HOT 2
- Thumb Images Can't Be Shown? HOT 3
- Autoscroll Mouse Down Expected Behavior? HOT 2
- NEXT 13.4.5: Uncaught TypeError: Super expression must either be null or a function, not undefined HOT 6
- Does the library support swiping with gestures? HOT 1
- Recalculate sizes when resize browser HOT 1
- Initially displaying wrong item and skipping next item on autoplay HOT 2
- If InfiniteLoop is true, it comes out from the end of data HOT 3
- height of carousel collapses after reaching the last image - what am I doing wrong? HOT 1
- How can i prevent vertical scroll on mobile? HOT 4
- [Ui]: Change the banner to an icon HOT 2
- Add indicatorContainer props to ease indicator positioning HOT 1
- Android/Firefox : Swiping on the last image make the gallery bug HOT 2
- Getting This localhost page canβt be found on yarn start HOT 1
- There is no way to remove 'role' attribute out of li or change li to another HTML elements from 'renderThumbs' props HOT 1
- Got an error when using with Astrojs in .astro file
- Transition time for Autoplay and Swipe
- onSwipeStart, onSwipeEnd and onSwipeMove don't work
- Carousel' cannot be used as a JSX component Error if using yarn2 pnp mode with typescript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-responsive-carousel.