window is not defined about filestack-react HOT 3 CLOSED

@AndrzejSala alright thanks, so for future reference, here is the solution I decided to implement:

import loadable from '@loadable/component';
const ReactFilestack = loadable(() => import('filestack-react'), { ssr: false });

We were already using loadable components, so I took advantage of it.

from filestack-react.

Also works to simply use the library included with Next.js. Example:

Importing into a parent component:

import dynamic from "next/dynamic"

const Picker = dynamic(() => import("../components/Picker"), { ssr: false })

Child component:

import ReactFilestack from 'filestack-react';

const Picker = () => (
<ReactFilestack
  apikey={YOUR_API_KEY}
  onSuccess={(res) => console.log(res)}
/>
)

export default Picker

from filestack-react.

@killiansc

I do not know what exactly limit the SSR has in comparison to CSR in terms of app rendering, but it seems that at the present moment it is not possible to render the whole running component on server side.

filestack-react is not a typical component, in the sense that it does not contain any DOM (except button or link) or own event handlers. It's more a layer of abstraction on filestack-js. It just calls methods from filestack-js sdk which dynamically load some scripts to build filestack-picker app and probably this scripts are not able to be rendered on server side.

You can check some workarounds for similar issue, people try to use ‘dynamic imports’ for it in this case.
#57

from filestack-react.