bug: getting $Ci not a constructor for imports of svg , png in static builds

[laciferin2024]

Describe the bug

$Ci is defined but its not a constructor.

THis bug happens only wth static build: my configuration:

svelte.config.ts

// import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/kit/vite";
import netlify from "@sveltejs/adapter-netlify";
// import staticAdapter from '@sveltejs/adapter-static'
import * as child_process from "node:child_process";
import { execSync } from "node:child_process";
// https://kit.svelte.dev/docs/configuration

export let tag = execSync("git describe --tags || git rev-parse --short HEAD").toString().trim();

console.log({ tag });

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [vitePreprocess({})],

	kit: {
		csrf: {
			checkOrigin: false, //FIXME: CVE
		},
		// embedded: true,
		env: {
			dir: ".",
			publicPrefix: "PUBLIC_",
			privatePrefix: "",
		},
		files: {
			assets: "static",
		},
		// inlineStyleThreshold: 5*1024, //default 0,

		csp: {
			mode: "auto",
			directives: {
				// hack for everything
				"default-src": ["self", "unsafe-inline", "data:"],
				"connect-src": ["self", "data:", "https:", "filesystem:", "http:"],
				"style-src": ["self", "unsafe-inline"],
				"font-src": ["self", "unsafe-inline", "data:"],
				"script-src": ["self", "wasm-unsafe-eval", "unsafe-inline", "unsafe-hashes"],
				"script-src-elem": [
					// "https://zauth.netlify.app",
					"self",
					"unsafe-inline",
					"wasm-unsafe-eval",
				],
			},
			// reportOnly: {
			// 	"script-src": ["self"],
			// },
		},
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: netlify({
			edge: false,
			split: false, //both don't work together
		}),

		// adapter: staticAdapter({
		// 	// default options are shown. On some platforms
		// 	// these options are set automatically — see below
		// 	pages: 'build',
		// 	assets: 'build',
		// 	fallback: '/index.html',
		// 	precompress: false,
		// 	strict: false,
		// }),
		// prerender: {
		// 	crawl: true,
		// 	concurrency: 1,
		// 	handleHttpError: ({ path, referrer, message }) => {
		// 					// ignore deliberate link to shiny 404 page
		// 					if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
		// 						return;
		// 					}

		// 					// otherwise fail the build
		// 					throw new Error(message);
		// 				}

		// 	// use relative URLs similar to an anchor tag <a href="/test/1"></a>
		// 	// do not include group layout folders in the path such as /(group)/test/1
		// 	// entries: ['/proof/view/ad074eb8-2bc0-4432-9636-04cceb7c1e87', '/qr/c94476a0-8a75-4563-b70a-bf6124d7c59b']
		// 	// entries: ['*','/']
		// },
		appDir: "app",
		version: {
			// name: child_process.execSync("git rev-parse HEAD").toString().trim(),
			name: tag,
		},
		output: {
			preloadStrategy: "modulepreload",
		},
	},
};

export default config;

// https://kit.svelte.dev/docs/configuration

Reproduction

.
├── +layout.ts
├── +page.svelte
├── check.png
└── setup.svg

1 directory, 4 files

in page.svelte:

import SetupSvg from "./setup.svg";
import CheckPng from "./check.png";

Logs

app.b793870b.js:1 TypeError: Ci is not a constructor
at 9.3a4be454.js:1:1207

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 70.23 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - /opt/homebrew/bin/npm
    pnpm: 9.1.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.7 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5

Severity

blocking all usage of svelte

[laciferin2024]

Reproduction URL: https://deploy-preview-70--zauth.netlify.app/onboarding/

[gtm-nayan]

Reproduction must be a simplified git repo containing minimum code to recreate the issue. Not a link to the deployed version of your app.

As it stands I can only guess you're running into vitejs/vite#11853

Provide a proper reproduction otherwise we can't do anything else here and this issue will be closed.

[paoloricciuti]

Closing as a reproduction was not provided but please feel free to reopen if you are still running into this

[laciferin2024]

@gtm-nayan I apologise. I missed the notification. Here u go: the complete reproducer:

https://gitlab.com/zauth/zauth/blob/892d10243dafea0ac3135392df00d9023754e7cd/src/routes/onboarding/+page.svelte#L4

Uncommenting the L4 or L5: results in builds crashing.

@paoloricciuti

[paoloricciuti]

@gtm-nayan I apologise. I missed the notification. Here u go: the complete reproducer:

https://gitlab.com/zauth/zauth/blob/892d10243dafea0ac3135392df00d9023754e7cd/src/routes/onboarding/+page.svelte#L4

Uncommenting the L4 or L5: results in builds crashing.

@paoloricciuti

I'll take a look but we would need a more minimal reproduction if possible

[laciferin2024]

Thank you @paoloricciuti , it seems like png,svg imports are not working in svelte files.

[paoloricciuti]

Thank you @paoloricciuti , it seems like png,svg imports are not working in svelte files.

That doesn't depend on svelte tho, it only depends on vite

[laciferin2024]

I guess that's bun dev works . But I do like to point out that issue is still with .svelte files and not with .ts files.

[paoloricciuti]

It seems like you are still using vite which should handle them...so if you can create a reproduction we can take a look.