freezeframe.js icon indicating copy to clipboard operation
freezeframe.js copied to clipboard

ReactFreezeframe not working with Server-Side Rendering

Open kaylabranch opened this issue 5 years ago • 4 comments

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.

kaylabranch avatar Feb 26 '21 14:02 kaylabranch

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

nickforddev avatar Mar 06 '21 23:03 nickforddev

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

RivkyB avatar Jun 17 '21 14:06 RivkyB

I'm having this same issue :(

KjellConnelly avatar Sep 06 '21 18:09 KjellConnelly

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,
});

julianjca avatar Sep 08 '22 02:09 julianjca

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

nickforddev avatar Dec 08 '22 05:12 nickforddev