search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.64k stars 2.89k forks source link

Using Node v21 not supported: breaks on typeof navigator check #3047

Open hewelt opened 11 months ago

hewelt commented 11 months ago

Tell us about your environment Node v21.2.0

Browser and Browser Version: n/a

After Effects Version:

n/a

What did you do? Please explain the steps you took before you encountered the problem.

I'm running remix serve command which starts my web application's runtime.

What did you expect to happen?

I expected the lottie-web code not to rely on typeof navigator to determine environment

What actually happened? Please include as much relevant detail as possible.

/Users/sebastian.hewelt/Code/xyz/node_modules/lottie-web/build/player/lottie.js:30
    return document.createElement(type);
    ^
ReferenceError: document is not defined

The code breaks because lottie.js checks for typeof navigator. This won't work anymore with Node.js v21+, because it's implemented navigator API. A discussion about other problems with it here.

The are many solutions options; one would be to find a more universal way to distinguish between environments, two - to check for document. 🙇🏻

zolzaya commented 10 months ago

any updates?

joeduncan commented 9 months ago

A quick workaround is disabling the Navigator API in Node v21 with --no-experimental-global-navigator: https://nodejs.org/api/globals.html#navigator

sunil013 commented 8 months ago

Is there any update regarding this? It's not working in the SSR case Node - 21.6.2 Screenshot 2024-02-27 150438 Screenshot 2024-02-27 150417

jlia0 commented 3 months ago

this bug is literally keeping me up at night, so annoying, please fix

simon-paris commented 2 months ago

+1 I've also experienced this crash

sourcec0de commented 3 weeks ago

A quick workaround is disabling the Navigator API in Node v21 with --no-experimental-global-navigator: https://nodejs.org/api/globals.html#navigator

This was the solution to ReferenceError: document is not defined. Node LTS enabled this partial implementation of the navigator API, which causes the Lottie module to think it's in the browser.

We added this with a temporary environment variable

NODE_OPTIONS="--no-experimental-global-navigator"

🙇 thanks @joeduncan