Issue with packaging npm module

[AristideBH]

Hello Stanislav, and thanks a lot for the great tutorial ! I've been following it to the letter, and althought I had a bit of headscratch at first, I managed to deploy to Caprover with success.

However, I'm having a problem when I try to import a specific npm module : I'm using Directus as my backend (also hosted on the VPS), and loading the @directus/sdk seems to work just fine on local dev server. But as soon as I deploy to Caprover via GitHub Actions and try to navigate to it, I get a nice 500 Error.

The CapRover log for this app states multiple things, especially about the not imported Directus module :

2023-07-18T13:18:38.571506842Z Listening on 0.0.0.0:3000
2023-07-18T13:18:56.412472211Z Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@directus/sdk' imported from /usr/src/app/build/server/chunks/2-f2153afa.js
2023-07-18T13:18:56.412537275Z at new NodeError (node:internal/errors:399:5)
2023-07-18T13:18:56.412545931Z at packageResolve (node:internal/modules/esm/resolve:794:9)
2023-07-18T13:18:56.412550408Z at moduleResolve (node:internal/modules/esm/resolve:843:20)
2023-07-18T13:18:56.412554189Z at defaultResolve (node:internal/modules/esm/resolve:1058:11)
2023-07-18T13:18:56.412558242Z at nextResolve (node:internal/modules/esm/loader:163:28)
2023-07-18T13:18:56.412563051Z at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
2023-07-18T13:18:56.412568078Z at ESMLoader.getModuleJob (node:internal/modules/esm/loader:416:18)
2023-07-18T13:18:56.412573092Z at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
2023-07-18T13:18:56.412577832Z at link (node:internal/modules/esm/module_job:75:36) {
2023-07-18T13:18:56.412581548Z code: 'ERR_MODULE_NOT_FOUND'
2023-07-18T13:18:56.412585375Z }
2023-07-18T13:27:52.449796935Z Listening on 0.0.0.0:3000

My Github Actions log, however, doesn't say anything about that, and seems to execute perfectly... logActions.txt

Other modules seem to work fine and don't throw any error.

I've tried to include a .dockerignore with node-modules inside but that has no effect...

Could the Dockerfile generation through Gitub Actions have stripped this module specificaly ?

[khromov]

👋 Hey! Can you have installed this dependency without -D flag? The way things are working out of the box, we are only copying the build folder into the container to keep the container small: https://github.com/khromov/self-hosted-sveltekit-demo/blob/main/Dockerfile#L22

However, if you install a package without the devDependency flag, Vite won't bundle it, this is a SvelteKit thing.

So you should first try that, but if Vite can't bundle the package for some reason, you can add RUN npm ci --omit=dev in the final build stage (just before we copy over the files) and that should put the prod dependencies in the container as well.

Let me know how it goes!

[AristideBH]

Thanks for you answer 🙏

I'll be damned, I thought I understood how devDependencies and dependencies worked, but I'm really new to Docker and environment settings. But that was indeed the problem.

In my mind, packages only used for the actual user-displayed site weren't needed as devDependencies. In that case, with Directus, it's not used to build or package anything, only to instantiate a database client.

Does that means that, for that use case of self-hosting my app and deploying it to through Docker container, I should always use -D for all my installs ?

On a site note, after a bit of struggling with a private repo, I found that I needed to set my Github Docker package as public. Otherwise, CapRover wasn't able to retrieve, build and serve the image !

[khromov]

@AristideBH It's a lot of new stuff in the beginning but it gets easier.

The dependencies/devDependencies split is due to Vite/Rollup, as noted here in the docs:

"Development dependencies will be bundled into your app using Rollup. To control whether a given package is bundled or externalised, place it in devDependencies or dependencies respectively in your package.json."

Externalised in this case just means "we're not gonna try to bundle it and leave it in node_modules". In SvelteKit I usually put everything as a devDependency since it gets bundled if needed. The only exception is some problematic packages have issues with Vite/Rollup, in such case I leave them externalised.

As for fetching private packages, you can do this by logging into the repository using the Cluster tab. First generate a Personal Access Token under Profile > Developer settings in GitHub with the read:packages scope.

Then use that token to log in to ghcr.io with your username and the token as the password.

It should look something like this and then you'll be able to pull from the private package: