Unclear documentation with `output.bundleStrategy === 'inline'` and `router.type === 'hash'`

[stephenlrandall]

Describe the bug

Perhaps I'm missing something obvious here, but attempting to use bundleStrategy: inline with adapter-static in a fresh SvelteKit skeleton project produces the following errors:

My configuration is

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: 'index.html'
		}),
		output: {
			bundleStrategy: 'inline'
		}
	}
};

export default config;

Reproduction

Use npx sv create ... and modify the Svelte config file to the above after adding @sveltejs/adapter-static as a dependency.

Logs

[Error] Error: Not found: /Users/.../Desktop/single-page-test/build/index.html
	handleError (index.html:21:4246)
	Me (index.html:19:45323)
	(anonymous function) (index.html:19:42665)
	st (index.html:19:44185)
	ra (index.html:19:34874)
	(anonymous function) (index.html:19:34277)
[Error] Cross origin requests are only supported for HTTP.
	(anonymous function) (index.html:19:28564)
	r (index.html:19:28764)
	(anonymous function) (index.html:19:43111)
[Error] Fetch API cannot load file:///_app/version.json due to access control checks.
	(anonymous function) (index.html:19:28564)
	r (index.html:19:28764)
	(anonymous function) (index.html:19:43111)
[Error] Not allowed to load local resource: file:///favicon.ico

System Info

System:
    OS: macOS 15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 144.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: 9.15.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/adapter-static: ^3.0.0 => 3.0.8 
    @sveltejs/kit: ^2.0.0 => 2.15.0 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    svelte: ^5.0.0 => 5.15.0 
    vite: ^5.4.11 => 5.4.11

Severity

annoyance

Additional Information

Really happy to see this feature getting attention -- it's incredibly useful in certain environments.

[stephenlrandall]

If I don't specify a fallback and instead pre-render all pages, it seems to work. Unfortunately, I'm trying to create an SPA -- is this fundamentally incompatible with an inline build?

[gterras]

Static output still needs to be served from http as seen in the error message (so apache/nginx or such).

[khromov]

Hey @eltigerchino , I looked into this and I think the issue for you is that when you open the file the route is not / but instead /single-page-test/build/index.html

If you create a catch-all route like src/routes/[...rest]/+page.svelte you will see that it will be invoked. If you want the build to both work on a web server (served from root) and served from index.html, I think you need to get a bit creative with the routing to make sure it works in all cases.

[stephenlrandall]

I've added a reproduction of some of my issues here: https://github.com/stephenlrandall/kit-inline-test

Using generic rest parameters wasn't really a feasible option, but using hash-based routing seemed to work well. It seems simple enough to toggle between a typical SPA deployment and an inline bundle deployment with the changes:

• Set output.bundleStrategy === 'inline'
• Set router.type === 'hash' and remove adapter.fallback since index.html seems to be generated automatically in this case
• Prepend #/ to the base path used in any internal links
• Adjust the construction of any URLs with query parameters to come before the hash (this one is the most annoying, if you want to support both kinds of deployments)

Some issues I still see:

• Favicons are not found by the browser (seen even in Rich's example here: https://svelte-snek.vercel.app, when downloaded and opened locally)
• Fetch requests in +page.js files fail
• Resource requests in CSS files fail

[stephenlrandall]

I think this is now just a documentation issue (follow-up to @eltigerchino here):

for inline bundles

• Using a hash-based router is required unless you take the suggestion above and create a catch-all route (src/routes/[...rest]/+page.svelte), which doesn't play well with other advanced routing.
• All assets should live in $lib, not static/.
• fetch requests to local assets don't work over file://, so you can use Vite's dynamic imports instead (or import.meta.glob to import a variable-named file).
  • Same goes for CSS url() requests.
• Similarly, any workers imported must use &inline (see https://vite.dev/guide/features.html#import-with-query-suffixes).

for hash-based routing

• Query parameters must be prepended instead of appended.
• Any links to anchors on the same page, which would typically be written as href="#<id>", must now be the full href="#/path/to/page#<id>".
  • I don't know if this is intended, or just a deficiency because of how browsers interact with the hash-based routing.
• Specifying a fallback page just generates the same file twice, and is therefore unnecessary.

[stephenlrandall]

Closing as a lot of my original issues/confusions have been resolved.