Dynamic imports don't work after build with @sveltejs/adapter-static

[dominikcz]

Describe the bug

I try to load some different yaml configuration files depending on path (for localization purposes). Application is build with @sveltejs/adapter-static. When you use dynamic imports for yaml, it works as expected but only as long as you try it on dev server with npm run dev. If you, however, use npm run build and try to use it in production svelte handles them differently to "static" imports and because of wrong content type it gets blocked in the browser.

Reproduction

I've prepared a repository to showcase it at https://github.com/dominikcz/sveltekit-yaml-test

Here is short summary:

// this works...
import yamlStatic from '/src/lib/data/example1.yaml';

// this also works...
let yamlDynamic1 = import("/src/lib/data/example2.yaml");

// this does not...
const path = "/src/lib/data/example2.yaml";
let yamlDynamic2 = import(path));

Below are two screenshots that you might find useful. First one is from development server, where you can notice that in network tab request for both example1.yaml and example2.yaml are clearly visible and work as expected.

When run on server (Apache 2.4.62 in my case, but I doubt it matters), however, you an see that requests for example1.yaml and example2.yaml are handled differently and latter one end up with an error.

Logs

Creating extension->page port windowPatchMessages:cb16ce0b-7bcf-4156-92e5-debc406c8ef6 patchWindow.js:68:13
Creating page->extension port windowPatchMessages:cb16ce0b-7bcf-4156-92e5-debc406c8ef6 patchWindow.js:68:13
GET
http://yaml.local/src/lib/data/example2.yaml
NS_ERROR_CORRUPTED_CONTENT

	
GET
	http://yaml.local/src/lib/data/example2.yaml
Status
404
Not Found
VersionHTTP/1.1
Transferred215 B (0 B size)
Referrer Policystrict-origin-when-cross-origin
DNS ResolutionSystem

Loading module from “http://yaml.local/src/lib/data/example2.yaml” was blocked because of a disallowed MIME type (“text/html”). yaml.local
Loading failed for the module with source “http://yaml.local/src/lib/data/example2.yaml”. yaml.local

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (4) x64 Intel(R) N100
    Memory: 4.53 GB / 11.75 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.5 
    @sveltejs/adapter-static: ^3.0.5 => 3.0.5 
    @sveltejs/kit: ^2.0.0 => 2.5.28 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.1.2 
    svelte: ^4.2.7 => 4.2.19 
    vite: ^5.0.3 => 5.4.6

Severity

serious, but I can work around it

Additional Information

No response

[eltigerchino]

I think the dynamic import doesn't work because JavaScript doesn't know how to handle importing YAML files. It works in development because Vite is transforming your YAML imports into valid JS. However, it can't handle the dynamic case without knowing what the asset path is at compile time. It's possible that a Vite plugin might be able to transform your YAML files into JS at compile time to make this doable? but I'm not entirely sure.

• https://github.com/Modyfi/vite-plugin-yaml
• https://www.npmjs.com/package/@yaml-js/vite