-
Notifications
You must be signed in to change notification settings - Fork 181
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
Comments
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:
After: Replace the direct import with a dynamic, lazy-loaded import:
Wrap the usage of Lottie with a Suspense component to handle loading states gracefully. Here’s the updated JSX where Lottie is used:
|
@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. |
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 |
Out of curiosity, what is the difference between this fix and and the one I posted? |
@0xCarti not much, just how its implemented. |
Contact Details
[email protected]
What happened?
OS: macOS Sonoma 14.6 (Intel)
Node:
23.4.0
npm:
10.9.2
Steps to reproduce:
npm run setup
successfully runnpm run dev
localhost:3000
vite
errors in terminalWhat 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
The text was updated successfully, but these errors were encountered: