ctrl-freaks / freezeframe.js

freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.
http://ctrl-freaks.github.io/freezeframe.js/
MIT License
1.41k stars 111 forks source link

ReactFreezeframe not working with Server-Side Rendering #89

Closed kaylabranch closed 1 year ago

kaylabranch commented 3 years ago

Hi all, I've got it working perfectly on my local (non server-side) instance, but when I try to run the code on the server I get a React minified #130 error. Has anyone had any luck running this SS? I'm assuming it has something to do with canvas, or the window object.

nickforddev commented 3 years ago

In my experience with SSR + Vue, the easiest solution was to not render components that use canvas or svg APIs, for example, server side. I'm not sure what React framework you are using, guessing next.js? It looks like it is works similarly to how nuxt.js does it under the hood.

https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages

Let me know if this is helpful. If not I can do some experimenting with next.js or whatever you are using

RivkyB commented 3 years ago

Hi, I don't know if this is a similar issue but when I try to load a gif in NextJS I get this error.

image

I am using this loader in my next.config.js const withAssetsImport = require("next-assets-import"); module.exports = withAssetsImport();

https://github.com/sayuti-daniel/next-assets-import

KjellConnelly commented 3 years ago

I'm having this same issue :(

julianjca commented 2 years ago

I use dynamic import with ssr: false to make it work with next.js

import dynamic from 'next/dynamic';

const ReactFreezeframe = dynamic(() => import('react-freezeframe'), {
  ssr: false,
});
nickforddev commented 1 year ago

yes because this library uses browser APIs you should disable SRR for any components that use FreezeFrame