Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dominikcz opened this issue Sep 18, 2024 · 0 comments
Open

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

dominikcz opened this issue Sep 18, 2024 · 0 comments

Comments

@dominikcz
Copy link

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.
yaml-dynamic-ok-on-dev

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.
yaml-dynamic-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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant