Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: document validation for SSR #3096

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

IcaroG
Copy link

@IcaroG IcaroG commented Jun 27, 2024

Fixes #2739 #3047 #3077

@IcaroG
Copy link
Author

IcaroG commented Jul 1, 2024

Hello @bodymovin. Could you please review this PR? Thanks.

@onedrop
Copy link

onedrop commented Jul 30, 2024

please review and merge this @bodymovin

@IcaroG
Copy link
Author

IcaroG commented Oct 25, 2024

Hey @bodymovin, would it be possible to merge this PR?

@korywka
Copy link

korywka commented Oct 27, 2024

I think we just need to fix addNavigatorValidation to check document and not navigator, cause nodejs now have navigator too. Thats why this fix stopped working.

Also to stop copy paste 'inject-version' name, cause it is not injecting version :)

@korywka
Copy link

korywka commented Oct 27, 2024

@mbasaglia Sorry for tagging you, just maybe you can help to merge this PR. People are really suffering from this problem. (I can provide a fix for the comment above).

@mbasaglia
Copy link
Collaborator

@mbasaglia Sorry for tagging you, just maybe you can help to merge this PR. People are really suffering from this problem. (I can provide a fix for the comment above).

I'm not familiar with rollup so I don't know what the fix does

@fpapado
Copy link

fpapado commented Oct 31, 2024

@mbasaglia Sorry for tagging you, just maybe you can help to merge this PR. People are really suffering from this problem. (I can provide a fix for the comment above).

I'm not familiar with rollup so I don't know what the fix does

In case it helps: addDocumentValidation is a Rollup plugin, that runs in the renderChunk phase (essentially when rollup writes one "chunk" of JS, usually a file). In this case, it prefixes all code with the equivalent of:

(typeof document !== 'undefined') && /* some IIFE here, according to the build */

This line is modelled after the existing setup (addNavigatorValidation also a rollup plugin), which adds the (typeof navigator !== 'undefined') check. Using that existing setup as an example, here is how the currently-published lottie output looks (from the npm code explorer for lottie-web > build/player/lottie.js; no deep links unfortunately 😅 ), after the existing addNavigatorValidation plugin transform:

CleanShot 2024-10-31 at 15 32 26@2x

Essentially, the change in this PR injects an extra check as part of the build process, to avoid things erroring out in node versions that expose a global navigator (thus leading to an incorrect environment detection). You can verify this transform by running the build, and inspecting the output for that check.

The committer of this PR could have opted to change the navigator check plugin to a document check plugin, but the additional plugin ensures that the navigator check still gets made. For example, there might be code inside the block that assumes that navigator exists, so this seems like a reasonable choice.

I would be happy to follow-up in this or another PR if you want. At work, we are currently maintaining a patch to make lottie-web compatible with recent Node versions, and we would very much like to see something like this upstreamed 😌

Apologies for the drive-by comment, you might know some of these already and I thought I might be of some help. Please let me know if there is any information that I can provide, and I will get back to you promptly!

@IcaroG
Copy link
Author

IcaroG commented Oct 31, 2024

I've changed the PR to fix the plugin names, but kept both the validations for now.
LMK if you need any change to merge this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

document is not defined for server side rendering SSR at createTag
6 participants