False positive prefetch external error when deployed to GitHub pages

[janosh]

Describe the bug

Not quite sure what's going wrong and if this is really a bug or misconfiguration on my part.

Trying to deploy this app to GitHub pages at https://janosh.github.io/periodic-table, all internal links log console errors:

Uncaught (in promise) Error: Attempted to prefetch a URL that does not belong to this app: https://janosh.github.io/periodic-table/polonium

The error is raised here:

https://github.com/sveltejs/kit/blob/f87d55b6d5d425c395e0c2585da28fdf1e27ab81/packages/kit/src/runtime/client/client.js#L217

and might be due to URLs incorrectly classified as external here (hard to say with minified stack trace in prod and can't reproduce in dev)

https://github.com/sveltejs/kit/blob/f87d55b6d5d425c395e0c2585da28fdf1e27ab81/packages/kit/src/runtime/client/client.js#L1002-L1003

data-sveltekit-prefetch is set globally on the body.

Reproduction

Doesn't repro on StackBlitz as I think it's related to serving the app on a non-root URL with a <base> tag as suggested in #7733.

Logs

No response

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 88.06 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - /opt/homebrew/bin/node
    npm: 8.19.1 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 107.1.45.127
    Chrome: 107.0.5304.110
    Safari: 16.1
  npmPackages:
    @sveltejs/adapter-static: 1.0.0-next.48 => 1.0.0-next.48 
    @sveltejs/kit: 1.0.0-next.553 => 1.0.0-next.553 
    svelte: ^3.53.1 => 3.53.1 
    vite: ^3.2.4 => 3.2.4

Severity

annoyance

Additional Information

No response

[stephenlrandall]

Does this issue persist if you use base from $app/paths instead of a <base> element? I was able to turn on prefetching successfully with a GitLab Pages deployment that way.

[janosh]

@stephenlrandall Yeah looks like same problem.

[dummdidumm]

I think you don't need to use the base element in your app, but you do need to set it in the config. The check takes into account the base path from the config. Could you test if that works?

[janosh]

@dummdidumm That would mean the docs here are incorrect:

Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your base (this is how the browser works). You can use base from $app/paths for that: <a href="{base}/your-page">Link</a>.

Which check are you referring to?

[dummdidumm]

The docs are correct. They omitted the alternative way with the base path though, which we should probably add (it has caveats though, which is why it's left out though).

What I mean is that you add the base setting to your svelte.config.js like you did here and adjust your base path injection here to <base href={base} /> (with import { base } from '$app/paths'), but don't adjust all your <a href tags, and then report back if this worked.

[janosh]

@dummdidumm Then I get lots of build errors:

Error: 404 /hydrogen does not begin with base, which is configured in paths.base and can be imported from $app/paths - see https://kit.svelte.dev/docs/configuration#paths for more info (linked from /periodic-table) at file:///home/runner/work/periodic-table/periodic-table/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:30:11

[dummdidumm]

Ah yeah, mhhm. I'm wondering if we shouldn't do that if we somehow detect there's a base path set - or if the is_external check should look for a base tag to use in case the base path isn't set. The safest way for now is as suggested to prepend the links with base from $app/paths as you did in that one linked commit.

[janosh]

The safest way for now is as suggested to prepend the links with base from $app/paths as you did in that one linked commit.

And ignore the console errors about trying to prefetch from external source you mean?

[dummdidumm]

Sorry, for some reason I thought I saw a commit where you did <a href="{base}/path/to/page">...</a> <- I meant doing it like this instead of using <base href=".."> tags. Else - yes I think you probably have to ignore them for now.

[janosh]

Sorry, for some reason I thought I saw a commit where you did <a href="{base}/path/to/page">...</a>.

Yes, there was one. I force-pushed. Sorry for the confusion. That commit had the same external prefetch console errors though.