Server rendering the component.

[romellogoodman]

Feature Request

Are there any plans to support serverside rendering of this library? Currently when rendered on the server an error is printed out.

[alexreardon]

Short term: the application should be able to render out without an errors and then be useable once react kicks in on page load.

Long term: once we figure out a programatic drag api it might be feasible to server side render into a mid drag (although this seems a bit strange)

Focusing on the short term then; can you please:

• confirm that you are using https://facebook.github.io/react/docs/react-dom-server.html
• provide a small case that fails and the code that drives it
• provide the error message

[romellogoodman]

Thanks for getting back to me so fast. I can confirm that I am indeed using react-dom-server and can provide the error message below. I will try and comment with a small case that fails and the code tomorrow.

ReferenceError: window is not defined
at Object.<anonymous> (/Users/rgoodman/workspace/passplan-ui/node_modules/react-beautiful-dnd/lib/state/create-store.js:23:24)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/rgoodman/workspace/passplan-ui/node_modules/react-beautiful-dnd/lib/view/drag-drop-context/drag-drop-context.js:37:20)
at Module._compile (module.js:569:30)

[alexreardon]

Yeah perfect - need to check we are not referencing any window globals in the initial render and then we should be good to go

[alexreardon]

I'll wait for your test case so i can be sure that everything will work for you 👍

[romellogoodman]

To make sure we are on the same page, when you say 'test case' do you mean a minimal build (backend code, frontend code, build code, etc) or just the components using the library?

[alexreardon]

The best would be a full setup

[romellogoodman]

Hey! So i created a full set up and posted it here.

I took the drag and drop example that is listed in this repo's readme and copied it into the DragNDrop.js.

If you uncomment it in App.js and run the app, the following message appears.

/Users/rgoodman/Desktop/ssr-react-beautiful-dnd/node_modules/react-beautiful-dnd/lib/state/create-store.js:23
var composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || _redux.compose;
                       ^

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/rgoodman/Desktop/ssr-react-beautiful-dnd/node_modules/react-beautiful-dnd/lib/state/create-store.js:23:24)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/rgoodman/Desktop/ssr-react-beautiful-dnd/node_modules/react-beautiful-dnd/lib/view/drag-drop-context/drag-drop-context.js:37:20)
    at Module._compile (module.js:569:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `node build/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rgoodman/.strong-registry/dev.cache/_logs/2017-08-31T01_27_47_880Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run build && npm run serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rgoodman/.strong-registry/dev.cache/_logs/2017-08-31T01_27_47_905Z-debug.log

It leads me to believe that the issue is in src/state/create-store.js. I'm going to open an issue to correct it.

[alexreardon]

After your fix does SSR work how you expect it to?

[romellogoodman]

Yes it does! I guess this was a bug and not a feature. We can close once #66 is merged.