Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"ReferenceError: document is not defined" in server-side rendering #50

Open
SillyFreak opened this issue Dec 23, 2018 · 2 comments
Open

Comments

@SillyFreak
Copy link

Server-side rendering gets me the following exception at import time:

ReferenceError: document is not defined
    at new DragDrop (.../node_modules/flexlayout-react/src/DragDrop.ts:40:23)
    at .../node_modules/flexlayout-react/src/DragDrop.ts:4:23
    at Object.<anonymous> (.../node_modules/flexlayout-react/src/DragDrop.ts:3:1)
    ...

DragDrop has a default instance, which tries to create a div at construction time, which fails on the server. Unfortunately, this fails at construction time so it can only be fixed by conditional importing of the module, and not rendering on the server. Preferably of course, rendering would work on the server; drag & drop is not needed there.

I'm using the React Starter Kit, which provides server-side rendering.

@msimonian77
Copy link

We are having the same issue and we would very much appreciate it if someone can look into fixing it as this layout has such great potential but is failing when server side rendering.
The error is coming from the DragDrop.js:
DragDrop.instance = new DragDrop();
So far the only way we can go around it is to change this file and that we really don't want to do:

var canUseDOM = !!(
  (typeof window !== 'undefined' &&
  window.document && window.document.createElement)
);	
DragDrop.instance = canUseDOM ? new DragDrop() : null;

Thanks in advance to whoever fixes it :)

N8th8n8el added a commit to N8th8n8el/FlexLayout that referenced this issue May 14, 2020
@thomasjm
Copy link

It looks like such a workaround maybe have already been applied here?

const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);

However, is this library really going to work for SSR at all? I was looking at the main render method here:

render() {

It says it uses the first render to do some measurement (which sounds unlikely to work in SSR), and only renders the layout on subsequent renders. Since componentDidMount and componentDidUpdate don't run on SSR, I don't see how this can possibly render properly. I'd love to be wrong about this, as the reason I'm interested in this library is the possibility of rendering nice-looking tab layouts on the server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants