Can't use `generateHtmlFromNodes` correctly for SSR

[eashish93]

When using generateHtmlFromNodes, I encountered an error: To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function. which is fine as JSDOM is required, but this error doesn't mention which variables this function needs, so I dig into the code and found that we need to declare something like this first to make it work:

const { JSDOM } = jsdom;

const window = new JSDOM(`...`).window;
global.document = window.document;
// @ts-expect-error
global.window = window;

// Sometimes `global.navigator` also needs to be defined with `global.window `

// @ts-expect-error
global.DocumentFragment = function() { return JSDOM.fragment(``) }

This function is checking for both document and window. This should only check for document and DocumentFragment only, as these are the only methods generateHtmlFromNodes using.

Lexical version: 0.7.4

[Multiply]

Same issue here. Overriding document, window etc. also seems to trip up NextJS's API runtime, so an option to pass in JSDOM as an override would be amazing.

[sneko]

Same issue here. Overriding document, window etc. also seems to trip up NextJS's API runtime, so an option to pass in JSDOM as an override would be amazing.

@thegreatercurve @zurfyx any plan to add this? Would avoid polluting the backend environment as mentioned in https://github.com/facebook/lexical/issues/3097#issuecomment-1511496254

[Bunkerbewohner]

I also just stumbled over this. For context: I'm persisting the editor's collaboration state in form of the Ydoc using Hocuspocus and a custom persistence extension. On the server-side I'm storing/loading the Ydoc, and in addition I want to generate HTML from the Ydoc / editorstate so that I can server-side render an HTML preview of the editor before it's fully loaded.

[Fritiof]

~I can't even get the JSDOM solution to work, happy to get an example to look at if anyone can share!~

Nevermind, using Next and it makes it go bonkers

[Chigozie-Gerald]

I also just stumbled over this. For context: I'm persisting the editor's collaboration state in form of the Ydoc using Hocuspocus and a custom persistence extension. On the server-side I'm storing/loading the Ydoc, and in addition I want to generate HTML from the Ydoc / editorstate so that I can server-side render an HTML preview of the editor before it's fully loaded.

You can create a webpack library in a nodejs workspace and have the document and window properties defined globally there or utilize webpack's webpack.ProvidePlugin plugin Wrote a solution about it here

[konhi]

This implementation solves the issue for Next

[koderyoda]

This implementation solves the issue for Next

But other concurrent requests might fail while this function is running because this is still polluting global??

[etrepum]

No, it’s all synchronous, there’s no danger of polluting other requests assuming your finalizer is correct.

[koderyoda]

I noticed without the finalizer block, it wiped my environment variables for subsequent unrelated requests. The finalizer fixed that. But I am guessing in prod this means that requests will (seem to) arbitrarily fail if they coincide with any other request running this function.

[etrepum]

No. This function runs synchronously, no other code can execute while it is running. JavaScript doesn’t have any parallelism.