Details

Reviewers

Group Reviewers

Restricted Project

Commits

rABC55a615d5657d: [e.cash] Fix SSR Error with Lottie Animations in Node.js 22

Summary

The build was failing with 'ReferenceError: document is not defined' errors during the "Collecting page data" phase when using Node.js 22. This was caused by lottie-web (a dependency of lottie-react) trying to access browser APIs during server-side rendering.

Root Cause:
Node.js 22 introduced stricter SSR validation compared to Node.js 20
The lottie-web library attempts to access the document object during module initialization
Node.js 22 now catches and throws errors for browser API usage during SSR, while Node.js 20 was more permissive
This affected all pages using Lottie animations (/wallets, /mining, /what-is-ecash, etc.)

Solution:
Implemented dynamic imports in the AnimateImage component to ensure lottie-react only loads on the client side.

Test Plan

preview build and check

Diff Detail

Repository

rABC Bitcoin ABC

Branch

ecash-fix-lottie-build-errors

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 34340
Build 68148: Build Diff
Build 68147: arc lint + arc unit

Event Timeline

johnkuney created this revision.Sep 4 2025, 19:07

Herald added a reviewer: Restricted Project. · View Herald TranscriptSep 4 2025, 19:07

Harbormaster completed remote builds in B34328: Diff 55491.Sep 4 2025, 19:07

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41633 for the next 60 minutes.

johnkuney published this revision for review.Sep 4 2025, 19:13

johnkuney planned changes to this revision.Sep 4 2025, 19:42

use next 14 instead

Harbormaster completed remote builds in B34329: Diff 55493.Sep 4 2025, 19:50

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.

Tail of the build log:

#8 8.624 added 818 packages, and audited 819 packages in 8s
#8 8.624 
#8 8.624 154 packages are looking for funding
#8 8.624   run `npm fund` for details
#8 8.630 
#8 8.630 8 vulnerabilities (1 low, 4 moderate, 2 high, 1 critical)
#8 8.630 
#8 8.630 To address all issues, run:
#8 8.630   npm audit fix
#8 8.630 
#8 8.630 Run `npm audit` for details.
#8 8.631 npm notice
#8 8.631 npm notice New major version of npm available! 10.9.3 -> 11.6.0
#8 8.631 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.0
#8 8.631 npm notice To update run: npm install -g npm@11.6.0
#8 8.631 npm notice
#8 DONE 9.1s

#9 [5/5] RUN npm run build
#9 sha256:6fc3561e7b567873cdbd136d9ae507e9c3cb24c509656a1684d7a5a892002559
#9 0.547 
#9 0.547 > e.cash@0.0.1 build
#9 0.547 > next build
#9 0.547 
#9 1.031 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 1.031 This information is used to shape Next.js' roadmap and prioritize features.
#9 1.031 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 1.031 https://nextjs.org/telemetry
#9 1.031 
#9 1.083   ▲ Next.js 14.2.32
#9 1.083   - Environments: .env
#9 1.083 
#9 1.084    Linting and checking validity of types ...
#9 1.172    Creating an optimized production build ...
#9 10.14  ✓ Compiled successfully
#9 10.14    Collecting page data ...
#9 10.66 ReferenceError: document is not defined
#9 10.66     at createTag (/node_modules/lottie-web/build/player/lottie.js:30:5)
#9 10.66     at /node_modules/lottie-web/build/player/lottie.js:1316:20
#9 10.66     at /node_modules/lottie-web/build/player/lottie.js:1323:6
#9 10.66     at /node_modules/lottie-web/build/player/lottie.js:1540:4
#9 10.66     at /node_modules/lottie-web/build/player/lottie.js:2:83
#9 10.66     at Object.<anonymous> (/node_modules/lottie-web/build/player/lottie.js:5:3)
#9 10.66     at Module._compile (node:internal/modules/cjs/loader:1706:14)
#9 10.66     at Object..js (node:internal/modules/cjs/loader:1839:10)
#9 10.66     at Module.load (node:internal/modules/cjs/loader:1441:32)
#9 10.66     at Function._load (node:internal/modules/cjs/loader:1263:12)
#9 10.66 
#9 10.66 > Build error occurred
#9 10.67 Error: Failed to collect page data for /what-is-ecash
#9 10.67     at /node_modules/next/dist/build/utils.js:1269:15
#9 10.67     at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
#9 10.67   type: 'Error'
#9 10.67 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
 > [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1

try v14

Harbormaster completed remote builds in B34330: Diff 55494.Sep 4 2025, 20:00

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.

Tail of the build log:

#8 10.03   run `npm fund` for details
#8 10.09 
#8 10.09 9 vulnerabilities (1 low, 4 moderate, 2 high, 2 critical)
#8 10.09 
#8 10.09 To address issues that do not require attention, run:
#8 10.09   npm audit fix
#8 10.09 
#8 10.09 To address all issues, run:
#8 10.09   npm audit fix --force
#8 10.09 
#8 10.09 Run `npm audit` for details.
#8 10.09 npm notice
#8 10.09 npm notice New major version of npm available! 10.9.3 -> 11.6.0
#8 10.09 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.0
#8 10.09 npm notice To update run: npm install -g npm@11.6.0
#8 10.09 npm notice
#8 DONE 10.5s

#9 [5/5] RUN npm run build
#9 sha256:3156fd2c59b8bbeda3733a2bd93c9188ab75d6ea01159ff058e8b36a6b9d90fe
#9 0.597 
#9 0.597 > e.cash@0.0.1 build
#9 0.597 > next build
#9 0.597 
#9 1.034 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 1.034 This information is used to shape Next.js' roadmap and prioritize features.
#9 1.034 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 1.034 https://nextjs.org/telemetry
#9 1.034 
#9 1.109    Linting and checking validity of types ...
#9 1.190    ▲ Next.js 14.0.0
#9 1.190    - Environments: .env
#9 1.190 
#9 1.190    Creating an optimized production build ...
#9 7.479  ✓ Compiled successfully
#9 7.480    Collecting page data ...
#9 8.197 ReferenceError: document is not defined
#9 8.197     at createTag (/node_modules/lottie-web/build/player/lottie.js:30:5)
#9 8.197     at /node_modules/lottie-web/build/player/lottie.js:1316:20
#9 8.197     at /node_modules/lottie-web/build/player/lottie.js:1323:6
#9 8.197     at /node_modules/lottie-web/build/player/lottie.js:1540:4
#9 8.197     at /node_modules/lottie-web/build/player/lottie.js:2:83
#9 8.197     at Object.<anonymous> (/node_modules/lottie-web/build/player/lottie.js:5:3)
#9 8.197     at Module._compile (node:internal/modules/cjs/loader:1706:14)
#9 8.197     at Object..js (node:internal/modules/cjs/loader:1839:10)
#9 8.197     at Module.load (node:internal/modules/cjs/loader:1441:32)
#9 8.197     at Function._load (node:internal/modules/cjs/loader:1263:12)
#9 8.199 
#9 8.199 > Build error occurred
#9 8.201 Error: Failed to collect page data for /mining
#9 8.201     at /node_modules/next/dist/build/utils.js:1211:15
#9 8.201     at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
#9 8.201   type: 'Error'
#9 8.201 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
 > [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1

try v13

Harbormaster completed remote builds in B34331: Diff 55495.Sep 4 2025, 20:07

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.

Tail of the build log:

#8 9.263 added 819 packages, and audited 820 packages in 9s
#8 9.263 
#8 9.263 154 packages are looking for funding
#8 9.263   run `npm fund` for details
#8 9.310 
#8 9.310 9 vulnerabilities (1 low, 4 moderate, 3 high, 1 critical)
#8 9.310 
#8 9.310 To address issues that do not require attention, run:
#8 9.310   npm audit fix
#8 9.310 
#8 9.310 To address all issues (including breaking changes), run:
#8 9.310   npm audit fix --force
#8 9.310 
#8 9.310 Run `npm audit` for details.
#8 9.311 npm notice
#8 9.311 npm notice New major version of npm available! 10.9.3 -> 11.6.0
#8 9.311 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.0
#8 9.311 npm notice To update run: npm install -g npm@11.6.0
#8 9.311 npm notice
#8 DONE 9.8s

#9 [5/5] RUN npm run build
#9 sha256:4a762e67947a75633ed43ca64c41453f67674bda671cfbb826c7765504d4c2c7
#9 0.532 
#9 0.532 > e.cash@0.0.1 build
#9 0.532 > next build
#9 0.532 
#9 0.993 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 0.993 This information is used to shape Next.js' roadmap and prioritize features.
#9 0.993 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 0.993 https://nextjs.org/telemetry
#9 0.993 
#9 1.067    Linting and checking validity of types ...
#9 1.141    Creating an optimized production build ...
#9 7.339  ✓ Compiled successfully
#9 7.340    Collecting page data ...
#9 8.077 ReferenceError: document is not defined
#9 8.077     at createTag (/node_modules/lottie-web/build/player/lottie.js:30:5)
#9 8.077     at /node_modules/lottie-web/build/player/lottie.js:1316:20
#9 8.077     at /node_modules/lottie-web/build/player/lottie.js:1323:6
#9 8.077     at /node_modules/lottie-web/build/player/lottie.js:1540:4
#9 8.077     at /node_modules/lottie-web/build/player/lottie.js:2:83
#9 8.077     at Object.<anonymous> (/node_modules/lottie-web/build/player/lottie.js:5:3)
#9 8.077     at Module._compile (node:internal/modules/cjs/loader:1706:14)
#9 8.077     at Object..js (node:internal/modules/cjs/loader:1839:10)
#9 8.077     at Module.load (node:internal/modules/cjs/loader:1441:32)
#9 8.077     at Function._load (node:internal/modules/cjs/loader:1263:12)
#9 8.079 
#9 8.079 > Build error occurred
#9 8.081 Error: Failed to collect page data for /mining
#9 8.081     at /node_modules/next/dist/build/utils.js:1171:15
#9 8.081     at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
#9 8.081   type: 'Error'
#9 8.081 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
 > [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1

earlier 13 version

Harbormaster completed remote builds in B34332: Diff 55496.Sep 4 2025, 20:33

@bot preview-e.cash

teamcity updated a token.Sep 4 2025, 20:33

johnkuney planned changes to this revision.Sep 4 2025, 20:34

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) failed.

Tail of the build log:

#8 9.695 added 819 packages, and audited 820 packages in 9s
#8 9.695 
#8 9.695 154 packages are looking for funding
#8 9.695   run `npm fund` for details
#8 9.756 
#8 9.756 9 vulnerabilities (1 low, 4 moderate, 2 high, 2 critical)
#8 9.756 
#8 9.756 To address issues that do not require attention, run:
#8 9.756   npm audit fix
#8 9.756 
#8 9.756 To address all issues, run:
#8 9.756   npm audit fix --force
#8 9.756 
#8 9.756 Run `npm audit` for details.
#8 9.757 npm notice
#8 9.757 npm notice New major version of npm available! 10.9.3 -> 11.6.0
#8 9.757 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.0
#8 9.757 npm notice To update run: npm install -g npm@11.6.0
#8 9.757 npm notice
#8 DONE 10.2s

#9 [5/5] RUN npm run build
#9 sha256:4380e6ca69c6eee367e3b6524ab6bde5fdd17a099b2c48873a3c74bb980457a2
#9 0.571 
#9 0.571 > e.cash@0.0.1 build
#9 0.571 > next build
#9 0.571 
#9 1.035 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#9 1.035 This information is used to shape Next.js' roadmap and prioritize features.
#9 1.035 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#9 1.035 https://nextjs.org/telemetry
#9 1.035 
#9 1.108    Linting and checking validity of types ...
#9 1.183    Creating an optimized production build ...
#9 7.431  ✓ Compiled successfully
#9 7.433    Collecting page data ...
#9 8.105 ReferenceError: document is not defined
#9 8.105     at createTag (/node_modules/lottie-web/build/player/lottie.js:30:5)
#9 8.105     at /node_modules/lottie-web/build/player/lottie.js:1316:20
#9 8.105     at /node_modules/lottie-web/build/player/lottie.js:1323:6
#9 8.105     at /node_modules/lottie-web/build/player/lottie.js:1540:4
#9 8.105     at /node_modules/lottie-web/build/player/lottie.js:2:83
#9 8.105     at Object.<anonymous> (/node_modules/lottie-web/build/player/lottie.js:5:3)
#9 8.105     at Module._compile (node:internal/modules/cjs/loader:1706:14)
#9 8.105     at Object..js (node:internal/modules/cjs/loader:1839:10)
#9 8.105     at Module.load (node:internal/modules/cjs/loader:1441:32)
#9 8.105     at Function._load (node:internal/modules/cjs/loader:1263:12)
#9 8.107 
#9 8.107 > Build error occurred
#9 8.109 Error: Failed to collect page data for /mining
#9 8.109     at /node_modules/next/dist/build/utils.js:1171:15
#9 8.109     at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
#9 8.109   type: 'Error'
#9 8.109 }
#9 ERROR: executor failed running [/bin/sh -c npm run build]: exit code: 1
------
 > [5/5] RUN npm run build:
------
executor failed running [/bin/sh -c npm run build]: exit code: 1
Build preview-e.cash failed with exit code 1

revert version change

Harbormaster completed remote builds in B34333: Diff 55497.Sep 4 2025, 20:47

johnkuney planned changes to this revision.Sep 4 2025, 20:47

revert package lock

Harbormaster completed remote builds in B34334: Diff 55498.Sep 4 2025, 20:51

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41683 for the next 60 minutes.

fix undefined error

Harbormaster completed remote builds in B34335: Diff 55499.Sep 4 2025, 21:14

@bot preview-e.cash

teamcity updated a token.Sep 4 2025, 21:14

johnkuney edited the summary of this revision. (Show Details)Sep 4 2025, 21:15

johnkuney edited the summary of this revision. (Show Details)

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41835 for the next 60 minutes.

not clear why this is necessary.

if some diff introduced this issue, we should figure it out.

we can't just guess that "hm something mustve changed"

This revision now requires changes to proceed.Sep 4 2025, 21:45

revert node version

Harbormaster completed remote builds in B34340: Diff 55506.Sep 5 2025, 15:35

@bot preview-e.cash

teamcity updated a token.Sep 5 2025, 15:39

johnkuney retitled this revision from [e.cash] Fix lottie build errors to [e.cash] Fix build errors.Sep 5 2025, 15:41

johnkuney edited the summary of this revision. (Show Details)

johnkuney edited the test plan for this revision. (Show Details)

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.68.37.192:41419 for the next 60 minutes.

it's nice to find this out but the solution is not to downgrade the node version.

now that we know the issue, can have a diff with the fix, explain what happened.

This revision now requires changes to proceed.Sep 5 2025, 15:56

dont revert node, bring back dynamic import

Harbormaster completed remote builds in B34342: Diff 55508.Sep 5 2025, 16:02

johnkuney retitled this revision from [e.cash] Fix build errors to [e.cash] Fix SSR Error with Lottie Animations in Node.js 22.Sep 5 2025, 16:05

johnkuney edited the summary of this revision. (Show Details)

@bot preview-e.cash

Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.66.92:41112 for the next 60 minutes.

bytesofman accepted this revision.Sep 5 2025, 18:55

This revision is now accepted and ready to land.Sep 5 2025, 18:55

Closed by commit rABC55a615d5657d: [e.cash] Fix SSR Error with Lottie Animations in Node.js 22 (authored by johnkuney). · Explain WhySep 5 2025, 21:25

This revision was automatically updated to reflect the committed changes.

johnkuney added a commit: rABC55a615d5657d: [e.cash] Fix SSR Error with Lottie Animations in Node.js 22.

[e.cash] Fix SSR Error with Lottie Animations in Node.js 22
ClosedPublic
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 55506

web/e.cash/Dockerfile

[e.cash] Fix SSR Error with Lottie Animations in Node.js 22ClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 55506

web/e.cash/Dockerfile

[e.cash] Fix SSR Error with Lottie Animations in Node.js 22
ClosedPublic
Actions

Revision Contents
Changeset List