Comments (9)
romellogoodman
commented on May 6, 2024
2
Yes it does! I guess this was a bug and not a feature. We can close once #66 is merged.
from react-beautiful-dnd.
alexreardon
commented on May 6, 2024
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.
romellogoodman
commented on May 6, 2024
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.
alexreardon
commented on May 6, 2024
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.
alexreardon
commented on May 6, 2024
I'll wait for your test case so i can be sure that everything will work for you 👍
from react-beautiful-dnd.
romellogoodman
commented on May 6, 2024
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.
alexreardon
commented on May 6, 2024
The best would be a full setup
from react-beautiful-dnd.
romellogoodman
commented on May 6, 2024
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.
alexreardon
commented on May 6, 2024
After your fix does SSR work how you expect it to?
from react-beautiful-dnd.
Related Issues (20)
- Trouble with Antd Menu HOT 2
- What is the use of mode virtual
- Cards overlapping when I drag react-beautiful-dnd HOT 3
- Change the position of the Session Card that is being dragged to the right of the mouse
- When dragging the item, the element's size and the drop area are not being recognized at their respective sizes. HOT 2
- Cannot scroll to the bottom of the list when working with react-window VariableSizeList
- Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
- Nested horizontal dropzone doesn't work correctly
- where is the demo code and API? HOT 1
- 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
- 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 5
- 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?
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.