Error: url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.

[callmeberzerker]

Describe the bug

Once I updated the latest svelte-kit version and above (x > @sveltejs/kit@1.0.0-next.405) I am getting the following error when I just try to use the url in the load function. As you can see from the repro I don't even try to access the url.hash but it still reports as it's illegal to do it.

See the contents of +layout.js.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-n4vmbd?file=src/routes/+layout.js

Logs

url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.
Error: url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.
    at get hash [as hash] (file:///home/projects/sveltejs-kit-template-default-n4vmbd/node_modules/@sveltejs/kit/src/utils/url.js:99:9)
    at [nodejs.util.inspect.custom] (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:137075)
    at formatValue (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:95687)
    at inspect (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:92243)
    at formatWithOptionsInternal (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:115079)
    at formatWithOptions (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:116334)
    at console.value (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:1056475)
    at console.log (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:6:1056613)
    at console.consoleCall (https://sveltejs-kit-template-default-n4vmbd.w.staticblitz.com/blitz.df64f655701fde45529fa8e152b3842072335b47.js:15:372509)
    at load (/src/routes/+layout.js:2:10)

System Info

Not needed - see repro.

Severity

blocking an upgrade

Additional Information

No response

[elliott-with-the-longest-name-on-github]

It's not technically a bug, though I can see why it would be frustrating. You are accessing url.hash, because console.log is trying to access it to log its value.

[callmeberzerker]

Oh yeah, of course toString() would try to print the hash as well. 🤦‍♂️Found also the PR/reasoning for this change - although it kinda didn't account for these kind of frustrating experiences. 😅

I can close the issue if this is not something to be reconsidered.

[Rich-Harris]

If we wanted we could override LoadURL.prototype.toString so that it returns the URL without the hash? People would miss out on the warning, but I think that's probably better than the current thing

[Rich-Harris]

Actually wait, toString doesn't invoke the getter:

[Rich-Harris]

(though we should override it anyway because it's currently revealing the hash)

[Rich-Harris]

Ok, so the issue here is that Node behaves in a non-standard way — browsers will log the object just fine, but Node does things differently. We can fix it like this...

import util from 'node:util';

export class LoadURL extends URL {
  /** @returns {string} */
  get hash() {
    throw new Error(
      'url.hash is inaccessible from load. Consider accessing hash from the page store within the script tag of your component.'
    );
  }

  [util.inspect.custom]() {
    return this.toString(); // or something that better resembles the current output
  }

  toString() {
    return this.origin + this.pathname + this.search;
  }
}

...but that doesn't work outside Node environments. Hmm.