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

[Bug]: Failed to import lottie-react #1503

Closed
its-kyle-yo opened this issue Dec 11, 2024 · 5 comments
Closed

[Bug]: Failed to import lottie-react #1503

its-kyle-yo opened this issue Dec 11, 2024 · 5 comments
Assignees
Labels
bug Something isn't working

Comments

@its-kyle-yo
Copy link

Contact Details

[email protected]

What happened?

OS: macOS Sonoma 14.6 (Intel)
Node: 23.4.0
npm: 10.9.2

Steps to reproduce:

  1. After running npm run setup successfully run npm run dev
  2. Navigate to localhost:3000
  3. Allow page to attempt to fully load
  4. See vite errors in terminal

What is the expected behaviour?

To see main landing page presumably.

Version

Self-hosted

What browsers are you seeing the problem on?

Chrome

Relevant log output

[2024-12-11 01:16:49] DEBUG Creating transport: nodemailer (6.9.16; +https://nodemailer.com/; SMTP/6.9.16[client:6.9.16])
(node:39721) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Invalid Sentry Dsn: sentry-dsn
  <-- GET /
Scheduler and workers registration completed
Scheduler and workers registration completed
7:16:58 PM [vite] Error when evaluating SSR module /app/components/zxing-scanner/zxing-scanner.tsx: failed to import "lottie-react"
|- ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

7:16:58 PM [vite] Error when evaluating SSR module /app/components/assets/relink-qr-code-dialog.tsx: failed to import "lottie-react"
|- ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

7:16:58 PM [vite] Error when evaluating SSR module /app/components/assets/actions-dropdown.tsx: failed to import "lottie-react"
|- ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

7:16:58 PM [vite] Error when evaluating SSR module /app/routes/_layout+/assets.$assetId.tsx: failed to import "lottie-react"
|- ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

7:16:58 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "lottie-react"
|- ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)
  --> GET / 500 8s
  <-- GET /favicon.ico
  --> GET /favicon.ico 302 2ms
  <-- GET /login?redirectTo=/favicon.ico
ReferenceError: document is not defined
    at createTag (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:30:5)
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1316:20
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1323:6
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:1540:4
    at /Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:2:83
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-web/build/player/lottie.js:5:3)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1327:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/Users/kyle/Development/shelf.nu/node_modules/lottie-react/build/index.js:5:14)
    at Module._compile (node:internal/modules/cjs/loader:1566:14)
    at Object..js (node:internal/modules/cjs/loader:1718:10)
    at Module.load (node:internal/modules/cjs/loader:1305:32)
    at Function._load (node:internal/modules/cjs/loader:1119:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at cjsLoader (node:internal/modules/esm/translators:267:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:200:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
    at async nodeImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)
    at async ssrImport (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:16)
    at async eval (/Users/kyle/Development/shelf.nu/app/components/zxing-scanner/zxing-scanner.tsx:6:31)
    at async instantiateModule (file:///Users/kyle/Development/shelf.nu/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)
  --> GET /login?redirectTo=/favicon.ico 500 1ms
@its-kyle-yo its-kyle-yo added the bug Something isn't working label Dec 11, 2024
@0xCarti
Copy link

0xCarti commented Dec 12, 2024

If you encounter the error ReferenceError: document is not defined when using Lottie in the ZXingScanner component, the issue is caused by Lottie being rendered during server-side rendering (SSR). Here’s how to fix it by lazy-loading the Lottie component for client-side rendering only.

Before: In zxing-scanner.tsx, the Lottie component is directly imported at line 8:

import Lottie from "lottie-react";

After: Replace the direct import with a dynamic, lazy-loaded import:

import React, { lazy, Suspense } from "react";

// Lazy-load Lottie
const Lottie = lazy(() => import("lottie-react"));

Wrap the usage of Lottie with a Suspense component to handle loading states gracefully. Here’s the updated JSX where Lottie is used:

<Suspense fallback={<Spinner />}>
  <div>
    <Lottie
      animationData={successfullScanAnimation}
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  </div>
</Suspense>

@DonKoko
Copy link
Contributor

DonKoko commented Dec 12, 2024

@its-kyle-yo Thanks for opening the issue. I have not faced this problem before but sounds like a typical SSR thing. I will take a look.

@0xCarti thanks for the solution suggestion.

@DonKoko
Copy link
Contributor

DonKoko commented Dec 13, 2024

hey @its-kyle-yo . We were not able to reproduce the error, however we have implemented a fix that should prevent this hydration error. You can see the PR here #1518
Could you give this a test and let us know if it solves your issue. If not we can look further into it.

@DonKoko DonKoko moved this from 🏗 In progress to 👀 In review in 🗺️ Shelf Roadmap Dec 13, 2024
@0xCarti
Copy link

0xCarti commented Dec 14, 2024

hey @its-kyle-yo . We were not able to reproduce the error, however we have implemented a fix that should prevent this hydration error. You can see the PR here #1518
Could you give this a test and let us know if it solves your issue. If not we can look further into it.

Out of curiosity, what is the difference between this fix and and the one I posted?

@DonKoko
Copy link
Contributor

DonKoko commented Dec 16, 2024

@0xCarti not much, just how its implemented.
Remix already handles imports via vite so that part was not needed.
As for the rest, its basically the same. Its just that we already have a component called <ClientOnly> that we use everywhere so we used that. The component comes from remix-utils: https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly

@DonKoko DonKoko moved this from 👀 In review to ✅ Done in 🗺️ Shelf Roadmap Dec 16, 2024
@DonKoko DonKoko closed this as completed Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Done
Development

No branches or pull requests

4 participants