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.

Sign up for GitHub

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

Jump to bottom

Handle cases when location.protocol is about: or data: #13226

Open
CNSeniorious000 opened this issue Dec 23, 2024 · 3 comments · May be fixed by #13231
Open

Handle cases when location.protocol is about: or data: #13226

CNSeniorious000 opened this issue Dec 23, 2024 · 3 comments · May be fixed by #13231

Comments

@CNSeniorious000
Copy link

CNSeniorious000 commented Dec 23, 2024 •
edited
Loading

Describe the problem

I am using svelte in several embedded webviews. I used to have to run a static file server before bundleStrategy: 'inline' became available yesterday.

Normally (if we click this html file) the url will start with file://, and everything works fine.

But In the webview implementation I use the url is a data url, and hydration always fails because of:

Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at data:text/html;chars…8L2h0bWw+Cg==:16:13

In another case, I want to parse metadata from an url using an iframe, but sveltekit apps always fail to hydrate because of a similar error:

Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at about:blank:16:13

Describe the proposed solution

Sveltekit always generates

  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">
      <script>
        {
          __sveltekit_1bknoa9 = {
            base: new URL('.', location).pathname.slice(0, -1)
        };

where new URL('.', location) will fail when location.protocol is data:// or about://

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response
@CNSeniorious000 CNSeniorious000 changed the title Handle cases when location.protocal is about: or data: Handle cases when location.protocol is about: or data: Dec 23, 2024
@CNSeniorious000
Copy link
Author

CNSeniorious000 commented Dec 23, 2024 •
edited
Loading

kit/packages/kit/src/runtime/server/page/render.js

Lines 103 to 113 in 64c8e04

// resolve e.g. '../..' against current location, then remove trailing slash
base_expression = `new URL(${s(base)}, location).pathname.slice(0, -1)`;
if (!paths.assets || (paths.assets[0] === '/' && paths.assets !== SVELTE_KIT_ASSETS)) {
assets = base;
}
} else if (options.hash_routing) {
// we have to assume that we're in the right place
base_expression = "new URL('.', location).pathname.slice(0, -1)";
}

An ugly fix would be

- `new URL(${s(base)}, location).pathname.slice(0, -1)`
+ `["about:", "data:"].includes(location.protocol) ? `${s(base)} : new URL(${s(base)}, location).pathname.slice(0, -1)`

- new URL('.', location).pathname.slice(0, -1)
+ ["about:", "data:"].includes(location.protocol) ? "" : new URL('.', location).pathname.slice(0, -1)

@eltigerchino
Copy link
Member

eltigerchino commented Dec 23, 2024 •
edited
Loading

You are welcome to open a pull request. Are there any other protocols we need to consider? Maybe we can create a set and search that.

@CNSeniorious000 CNSeniorious000 linked a pull request Dec 23, 2024 that will close this issue
Open
6 tasks
@CNSeniorious000
Copy link
Author

I think maybe ftp:? But it doesn't disrupt the current implementation. The only issues seem to arise with data: and about:.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: avoid errors when constructing the base path in certain edge cases CNSeniorious000/kit
2 participants
@eltigerchino @CNSeniorious000