Comments (12)
Could you post a gist? I'm pretty sure I don't need the things to work on the server... I just need them to not crash the server.
from react-modal.
How about including this into your app?
HTMLElement = typeof HTMLElement === 'undefined' ? function(){} : HTMLElement;
var appElement = ENV.CLIENT ?
document.getElementById('appElement') :
new HTMLElement();
from react-modal.
I could do that (plus shim document.body.etc - HTMLElement is just the first choke point), but I'd have to run a hacked version of this package rather than just put that in my app, and I'd prefer not to do that.
I could also possibly just require react-modal on the client-side and pass either it or a server-side alternative element all the way down my app hierarchy, but... come on. Plenty of people are running React trees in Node; it'd be nice to have a modal library that didn't require all that ducking and weaving.
from react-modal.
I had a little peek at wrapping the offending bits in ExecutionEnvironment.canUseDOM but I could not really think up a good way to do portals without the dom.
from react-modal.
@misuba this is crude and untested, just designed to give you the idea, https://gist.github.com/nelix/24dd21b12d4b005880aa
you could also not mess with react-modal at all and just render null instead if the dom is not available, but I think we could come up with a server render alternative that mostly works instead of these hacks
from react-modal.
With the @nelix 's gist augmented with the @ryanflorence 's workaround (HTMLElement = typeof HTMLElement === 'undefined' ? function(){} : HTMLElement;
), it doesn't crash on server and work well in the browser.
Can we considered the issue as solved and make a new release ? :)
from react-modal.
👍
from react-modal.
from react-modal.
from react-modal.
I wonder if the work from BedrockStreaming#1 could be merged into this repository? I've just tried it and it works fine when rendering React on server for me.
from react-modal.
Yes, something similar has already been done here by @misuba : #22
from react-modal.
Resolved with #22
from react-modal.
Related Issues (20)
- Replace focus trap with `inert` HOT 1
- Focus on the input element is lost when trying to scroll modal content by dragging scrollbar
- Focus trap incorrectly finds tabbable elements HOT 11
- Modal doesn't close on the first click on the overlay after click on elements containing event.stopPropagation() inside modal HOT 11
- Add support for React & Node 18 (as easy as adding startTransition() on each setState) HOT 18
- When I try to apply css variables from css modules in React, nothing is passed HOT 9
- Npm start related issue
- Why convert position property to inset? HOT 2
- Analysis: 90% of dependency updates in this repository can be merged.
- Should use event.key not event.code
- How can i make the modal overlay non blocking? HOT 2
- Resize error when moving tab around HOT 2
- Display blurry when elements with position attributes and have scrollbars. HOT 3
- Close the modal window on the first click when using stopPropagation() HOT 3
- Moving to a "modern" build system (hardcore level) HOT 6
- Refactor react-modal to use TypeScript HOT 1
- Replace Karma (now deprecated) with a new test runner HOT 6
- Runtime error when tabbing elements where shadowDom is a document fragment rather than an element
- Consider dropping support for React versions <= v16 HOT 3
- Avoid Scroll position being kept HOT 7
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-modal.