gatsby: window is not defined

[bfine9618]

Rendering filestack using gatsby throws the following error. Please help.

WebpackError: ReferenceError: window is not defined

  - filestack-react.js:1 Object../node_modules/filestack-react/dist/filestack-react.js
    [lib]/[filestack-react]/dist/filestack-react.js:1:452

[AndrzejSala]

@bfine9618
Can you provide version of filestack-react which are you using?

[MatthewGreenberg]

getting the same thing. i am using Next.js and the newest version of filestack-react

[MatthewGreenberg]

Ive partially figured this out. the 'window' object is not available on SSR react projects, so you need to dynamically import the module on componentDidMount or with a library. Next.js has dynamic imports-- im sure gatsby has something similar. This would be nice if it were mentioned in the docs

[bfine9618]

I found a solution without dynamic imports:

use the Client import from filestack-js. You have to import the js script into the gatsby-ssr file. I do it in the onRenderBody

export const onRenderBody = ({ setHeadComponents }) => { return setHeadComponents([ <script key="filestack" src="//static.filestackapi.com/filestack-js/2.x.x/filestack.min.js"/> ]) }

Then in your file you can import the filestack client in the component like this:
const client = filestack.init('API_KEY')

then you can use a normal html file import with the onChange function that looks like:
onChange={ (e) => client.upload(e.target.files[0]).then(data => console.log(data.url))}