[SteppedAnimatedMedia]: SSR is broken after moving up to NodeJS v22

[flannanl]

Package

Carbon for IBM Products

Description

Moving up to NodeJS v22 now breaks SSR badly. I cannot even start my service.

The SteppedAnimatedMedia component is referencing lottie-web and it seems on NodeJS v22, some of its functions that using the document object are not called even at the package import.

[2024-10-30T11:49:22.461] [FATAL] @console/console-platform-express-setup - document is not defined ReferenceError: document is not defined
    at createTag (/Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/flannanl/Git/projects-ui/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Object..js (node:internal/modules/cjs/loader:1689:10)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:141:16)
    at Object.<anonymous> (/Users/flannanl/Git/projects-ui/node_modules/@carbon/ibm-products/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js:12:14)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)

Component(s) impacted

See the stack trace in the description.

Browser

No response

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.47.0

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Cloud Projects

CodeSandbox or Stackblitz example

N/A

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[flannanl]

Looks like the crash is due to the new experimental feature in NodeJS v22: https://nodejs.org/docs/latest-v22.x/api/globals.html#navigator.

Since there is a way to disable the feature for now, I'm okay to lower the severity to 2.

[elycheea]

We’re actually looking remove decouple lottie-web from our implementation #6366. Linking the issue so we can keep you posted.

[github-actions]

This issue is stale because it has been open for 7 days with no activity.
Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.

[github-actions]

This issue was closed because it has received no activity for 14 days.