question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
Rich-Harriscommented, Aug 20, 2022

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.

2reactions
tcc-sejohnsoncommented, Aug 20, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is the hash part of the URL not available on the server ...
Basically the hash component of the page URL (the part following the # sign) is processed by the browser only - the browser...
Read more >
URL.hash - Web APIs - MDN Web Docs
The hash property of the URL interface is a string containing a '#' followed by the fragment identifier of the URL.
Read more >
Documentation - Ethers.js
A connection to the Ethereum network (a Provider); Holds your private key and can sign things (a Signer). Connecting to an RPC client....
Read more >
Lightning Aura Components Developer Guide
Get Your Aura Components Ready to Use on Lightning Pages . ... The hash mark (#) is a URL fragment identifier and is...
Read more >
Troubleshoot designer component errors - Azure Machine ...
This article describes the error messages and exception codes in Azure Machine Learning designer to help you troubleshoot your machine ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found