Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSR is not working due to MutationObserver

See original GitHub issue

Hello,

Thank you for creating this wonderful package! Unfortunately, due to the nature of SSR, MutationObserver objects cannot be created on the server side:

https://github.com/kitten/use-editable/blob/33586136d9e0b8cd0cfabbc9a3a15f0808210236/src/useEditable.ts#L177

Changing the code above to const observerRef = useRef(typeof window !== "undefined" ? new MutationObserver(addMutationsToQueue) : null); could serve as an escape hatch.

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

2reactions

kripodcommented, Nov 26, 2020

Sure thing, thank you for fixing it! I favor progression over pride 😊

1reaction

kittencommented, Nov 27, 2020

@kripod yea, pasting I’ll have to double check some edge cases for so that’s 100% worth flagging as an issue if it’s misbehaving ❤️ it’s something I’ve aggressively reduced code for, which may mean it isn’t working right. Same for undo/redo although that’s more solid. This can’t really use native undo/redo (yet?) as that just goes against its logic too much…

The Firefox quirks I’ve dearly noticed. And they’re really annoying. Chrome and Safari seem to be very smooth here, so Webkit in general I guess, but Firefox really hates deletions for some reason and those do work consistently, but are rather quirky-feeling depending on their timing. I haven’t found a workaround for that yet

Top Results From Across the Web

SSR is not working due to MutationObserver · Issue #5 - GitHub

Hello, Thank you for creating this wonderful package! Unfortunately, due to the nature of SSR, MutationObserver objects cannot be created on ...

Angular-universal MutationObserver problem - Stack Overflow

You can try this solution: global['MutationObserver'] = getMockMutationObserver(); function getMockMutationObserver() { return class ...

MutationObserver in JavaScript Explained | by Ankit Saxena

MutationObserver is a Web API provided by modern browsers for detecting changes in the DOM. Using MutationObserver, when something in the DOM changes, ......

MutationObserver is not defined SSR Build Angular

Dear rockrude, This problem will be fixed with release 6.1.5 of MDB Angular. Now it's available to download from GitLab branch dev. Best...

MutationObserver() - Web APIs - MDN Web Docs

A function which will be called on each DOM change that qualifies given the observed node or subtree and options. The callback function...