Comments (9)
Yes it does! I guess this was a bug and not a feature. We can close once #66 is merged.
from react-beautiful-dnd.
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
from react-beautiful-dnd.
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)
from react-beautiful-dnd.
Yeah perfect - need to check we are not referencing any window globals in the initial render and then we should be good to go
from react-beautiful-dnd.
I'll wait for your test case so i can be sure that everything will work for you 👍
from react-beautiful-dnd.
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?
from react-beautiful-dnd.
The best would be a full setup
from react-beautiful-dnd.
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.
from react-beautiful-dnd.
After your fix does SSR work how you expect it to?
from react-beautiful-dnd.
Related Issues (20)
- The ui gets distorted when I drag and drop.
- Want to disable nesting tree for some nodes
- Drag and drop not working new window created through createPortal
- Tasks go on top of column title after dragging HOT 1
- Setting position issue -- When the page is scroll with position: Sticky, The drag component is not positioning properly.
- Droppable should only accept Draggables of same type ... but it doesn't work HOT 1
- Dragging Item while scrolling is not staying in the position with Tailwind CSS
- Update: 3rd April 2024 → "react-beautiful-dnd: where to from here?" HOT 9
- Unable to work in Next.js 14
- While dragging inner child below parent also moving upward HOT 1
- How to restrict draggable item moving out of parent div? HOT 2
- Site Not Found HOT 3
- Free coins from House of Fun
- Free Coins from House of Fun HOT 6
- When used inside a reactflow node, it will cause the node position to deviate
- are going to update the library to support React 19?
- Drag and Drop functionality is not working. HOT 3
- test
- Invariant failed: Cannot find droppable entry with id [photos]
- Nested Drag and Drop After Child level
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-beautiful-dnd.