search

filestack / filestack-react

Official React component for Filestack - API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.
https://www.filestack.com
MIT License
164 stars 41 forks source link

Server side rendering problem #9

Closed ZeroCho closed 7 years ago

ZeroCho commented 7 years ago

After changing code from const filestack = require('filestack-js').default

from import filestack from 'filestack-js';

Following issue happens when I try to render a component with react-filestack on the server ReferenceError: File is not defined

Because there is no File object in the server, this component cannot import filestack-js on the server. That is why I didn't import 'filestack-js', but require('filestack-js').default inside the click handler which only renders in client,

samuxyz commented 7 years ago

Interesting discovery @ZeroCho, I am going to throw this problem to the dev team asap! Btw, if you just require('filestack-js') it works?

ZeroCho commented 7 years ago

It should be inside the click event handler, so that it is only rendered in client. Look here

samuxyz commented 7 years ago

I just found out this thread http://stackoverflow.com/questions/33704714/cant-require-default-export-value-in-babel-6-x

I am not sure but perhaps the filestack-js should export in a ES5 style and that would not cause problems by running import filestack .... At the moment the guys exports filestack with export default.

Gonna tell them.

samuxyz commented 7 years ago

@ZeroCho yeah ive seen the old code but i wished it could be solved without tricks like that.

ZeroCho commented 7 years ago

@samuxyz Any recent news about this? I'm thinking about making separate branch for SSR temporarily. I'm still using v0.5.3 due to this problem.

velveteer commented 7 years ago

@ZeroCho I think the next release of filestack-js should resolve this issue*. I will let you know when that lands.

*Meaning fixing the root cause in filestack-js. I think @samuxyz pushed a fix for this in https://github.com/filestack/react-filestack/commit/bb8a37b3ca8cf9592081f779cc11a7c98e725e87.

samuxyz commented 7 years ago

@velveteer yes at the moment I reverted to the original require from @ZeroCho within the function. I guess I'll close the issue for now.