[Bug]: npm run dev runs into a reference error with Lottie

[LK-RPN]

Contact Details

No response

What happened?

When first installing shelf.nu locally using Supabase CLI, following all the steps for the installation works fine until the step where you have to run "npm run dev" for the first time.

It starts the server just fine, but when trying to access the web GUI (it doesn't matter if it is via localhost or via the network) it loads for a while, then the console spits out the following error:

ReferenceError: document is not defined
at createTag (C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:30:5)
at C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:1316:20
at C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:1323:6
at C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:1540:4
at C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:2:83
at Object. (C:\Shelf.nu\node_modules\lottie-web\build\player\lottie.js:5:3)
at Module._compile (node:internal/modules/cjs/loader:1562:14)
at Object..js (node:internal/modules/cjs/loader:1699:10)
at Module.load (node:internal/modules/cjs/loader:1313:32)
at Function._load (node:internal/modules/cjs/loader:1123:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1335:12)
at require (node:internal/modules/helpers:136:16)
at Object. (C:\Shelf.nu\node_modules\lottie-react\build\index.js:5:14)
at Module._compile (node:internal/modules/cjs/loader:1562:14)
at Object..js (node:internal/modules/cjs/loader:1699:10)
at Module.load (node:internal/modules/cjs/loader:1313:32)
at Function._load (node:internal/modules/cjs/loader:1123:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at cjsLoader (node:internal/modules/esm/translators:263:5)
at ModuleWrap. (node:internal/modules/esm/translators:196: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:///C:/Shelf.nu/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:53058:15)
at async ssrImport (file:///C:/Shelf.nu/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52916:16)
at async eval (C:/Shelf.nu/app/components/zxing-scanner/success-animation.tsx:4:31)
at async instantiateModule (file:///C:/Shelf.nu/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:5)
--> GET / 500 25s
<-- GET /favicon.ico
--> GET /favicon.ico 302 8ms

The webpage only shows "Internal Server Error".

The machine is running on a ProxmoxVE VM running Windows 10 22H2 with 16 GB of RAM and 16 CPU cores.

EDIT TO ANYONE READING THIS BACK LATER ON:
The error was presumably caused by an interaction between Lottie and node.js version 22. Downgrading the node.js version to 20.9.0 has fixed this error.

What is the expected behaviour?

I expected the page to load normally.

Version

Self-hosted

What browsers are you seeing the problem on?

Microsoft Edge

Relevant log output

[DonKoko]

hey @LK-RPN . So i found this: Gamote/lottie-react#101

I have honestly never ran this app on windows so I assume its something related to how node runs on windows or the node version.
That being said, i do use a windows device to work on shelf development, but I only run shelf in WSL with node 20 and its no issue. Have you considered using WSL or are you limited to using actual windows environment to run your app?

[LK-RPN]

hey @LK-RPN . So i found this: Gamote/lottie-react#101

I have honestly never ran this app on windows so I assume its something related to how node runs on windows or the node version. That being said, i do use a windows device to work on shelf development, but I only run shelf in WSL with node 20 and its no issue. Have you considered using WSL or are you limited to using actual windows environment to run your app?

Hey @DonKoko , thanks for your reply!

If I'm honest I'm kind of new to all of this self hosting. We just recently killed the Hypervisor running VMWare Sphere and just installed Proxmox on it a week or two ago, it's kind of a learning by doing project.

I think it could be much easier (and a lot more efficient) theoretically running this directly in a Linux VM instead of the Linux environment on Windows. However, since I don't know much about Linux, I'm not really sure how to run Supabase CLI on Linux when it requires Docker Desktop installed, hence I'm doing this all on Windows. I only have previous experience with MongoDB, so I assumed it was going to be somewhat similar to that, but I was very wrong.

[DonKoko]

Yeah its quite different from Mongo, but no worries, I will try to help you as much as I can. Please make sure to check your node version. From what i find this is the main reason the issue could be happening. Try changing node version to see if it works.

[LK-RPN]

I downgraded my node.js version to 20.9.0 now. npm is yelling at me that npm 11 does not support this older node version but that should be easily fixable by downgrading npm later on.

When running npm run dev now it starts the server. When trying to access it, it takes a while. I get the following messages in my console:

[2025-02-05 14:12:14] DEBUG Creating transport: nodemailer (6.9.16; +https://nodemailer.com/; SMTP/6.9.16[client:6.9.16])
Invalid Sentry Dsn: sentry-dsn
<-- GET /
Scheduler and workers registration completed
Scheduler and workers registration completed

After that it opens the shelf.nu login window. I'm not quite sure what I should use to login as I don't think I have created any users.

If I understand correctly from the documentation, I am now still in the setup phase and need to follow the "Deployment" part of the documentation and install fly.io, create the S3 Buckets and do the GitHub actions now to actually get my working, self hosted copy of shelf, right?