InjectManifest The 'swSrc' file can't be read. ENOENT: no such file or directory error on Gitlab CI

[haleksandre]

Hi,

I am able to build the Sveltekit app successfully in my local environment (using podman with image node:18), but when I run the build command from within a Gitlab-CI runner using the same image (node:18) running the exact same commands I get the following error, after building the ssr bundle, when it's building client-side files. It instantly fails with the following error.

vite v4.4.9 building SSR bundle for production...
transforming...
✓ 321 modules transformed.

[vite-plugin-pwa:sveltekit:build] The 'swSrc' file can't be read. ENOENT: no such file or directory, 
open '/builds/metier-plus/web/test/admin/.svelte-kit/output/client/service-worker.js'

		SvelteKitPWA({
			strategies: "injectManifest",
			mode: process.env.NODE_ENV,
			srcDir: "./src",
			filename: "sw.ts",
			scope: "/",
			base: "/",
			// injectRegister: null,
			selfDestroying: process.env.SELF_DESTROYING_SW === "true",
			manifest: {
				name: "App",
				short_name: "App",
				start_url: "/",
				scope: "/",
				display: "standalone",
				theme_color: "#ffffff",
				background_color: "#ffffff",
				icons: [
					{
						src: "/android-chrome-192x192.png",
						sizes: "192x192",
						type: "image/png",
					},
					{
						src: "/android-chrome-512x512.png",
						sizes: "512x512",
						type: "image/png",
					},
					{
						src: "/android-chrome-512x512.png",
						sizes: "512x512",
						type: "image/png",
						purpose: "maskable",
					},
				],
			},
			injectManifest: {
				globPatterns: ["client/**/*.{js,css,ico,png,svg,webp,woff,woff2}"],
				maximumFileSizeToCacheInBytes: 10 * 1000 * 1000,
                                // Tried with & without
				injectionPoint: undefined, 
			},
                       // Tried with & without
			workbox: {
				globPatterns: ["client/**/*.{js,css,ico,png,svg,webp,woff,woff2}"],
				maximumFileSizeToCacheInBytes: 10 * 1000 * 1000,
				injectionPoint: undefined,
			},
			devOptions: {
				enabled: !process.env.SW_DEV,
				type: "module",
				navigateFallback: "/",
			},
		}),

It might be a Vite/Sveltekit issue? It seems like Vite/Sveltekit doesn't load the configs for the client-side bundling, so Sveltekit doesn't create the .svelte-kit/output/client directory & then VitePWA errors for the directory not found?

[userquin]

@haleksandre have you configured kit sw entry? https://vite-pwa-org.netlify.app/frameworks/sveltekit.html#generate-custom-service-worker

Latest kit pwa plugin version will delegate sw build to kit, and so you need to configure src/sw.ts in the kit config file. CHECK the entry in the docs, you will need to include/change a few things.

[haleksandre]

Yes, my svelte.config.js config is like so

import adapter from "@sveltejs/adapter-node";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({ out: "dist" }),
		env: {
			publicPrefix: "API_URL",
		},
		serviceWorker: {
			register: false,
		},
		files: {
			serviceWorker: "src/sw.ts",
		},
		csrf: {
			checkOrigin: process.env.NODE_ENV !== "development",
		},
	},
};

export default config;

It is peculiar that everything is building fine on my local using the exact same configs, files within the same image, and environment variables, but fails in the GitLab CI.

[userquin]

Can you show the gh pages output/dist folder?

[userquin]

Check if the output folder inside .sveltekit contains service-woker.js or sw.js (ot seems former is missing)

[haleksandre]

Turns out it was indeed an error caused by an environment variable. I did not realize that I had forgotten to add a .dockerignore file in the root, so the building process had access to the .env file when building locally on the host & inside a Dockerfile. On the CI, there were not such files so the imports of $env/static/private variables were throwing errors, as they did not exist. Svelte Kit was throwing errors but SvelteKitPWA wasn't catching them. It then tried to build regardless but then itself was throwing an error because the directory of the previous build process was missing. Perhaps add in the build process a way to catch & throw previous build step errors, if possible?

Anyways, thanks for taking the time to help me troubleshoot this issue. 👍