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.

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

Error when destructuring variables in slotted {@const} #8589

Closed
brandonmcconnell opened this issue May 15, 2023 · 1 comment
Closed

Error when destructuring variables in slotted {@const} #8589

brandonmcconnell opened this issue May 15, 2023 · 1 comment

Comments

@brandonmcconnell
Copy link
Contributor

brandonmcconnell commented May 15, 2023

Describe the bug

I can reference properties from a store like this in my template code:

$engagementsContext.sortedBy
$engagementsContext.toggleSort
$engagementsContext.sortActionTitle
$engagementsContext.sortIcon
$engagementsContext.sortedByInverse

…but if I first try to destructure those properties using {@const}, I get this error:

ReferenceFrror: sortedBy is not defined at Array.create_after_title_slot (and so on)

** My hunch is this has to do with the `{@const being considered part of the default slot of its parent's component, while I'm technically trying to use its destructured values in another slot.

Addtl referential screenshots

Working code sample (w/o destructuring) Broken code screenshot (w/ destructuring) Resulting error
Screenshot 2023-05-14 at 9 08 04 PM Screenshot 2023-05-14 at 9 07 46 PM Screenshot 2023-05-14 at 9 07 36 PM

Reproduction

Logs

[HMR][Svelte] Failed to rerender <+page>

ReferenceError: sortedBy is not defined
    at Array.create_after_title_slot (https://dev.carevoyance.com:5001/src/routes/app/(:5001/app/field/providers/search)/field/providers/[providerId]/+page.svelte?t=1684125015357:1729:17)
    at create_slot (index.mjs:71:28)
    at fallback_block_2 (MiniDossierSection.svelte:68:53)
    at create_if_block_4 (MiniDossierSection.svelte:68:53)
    at create_if_block_1 (MiniDossierSection.svelte:69:22)
    at create_fragment (MiniDossierSection.svelte:67:19)
    at init (index.mjs:2113:37)
    at new MiniDossierSection (MiniDossierSection.svelte:50:21)
    at createProxiedComponent (svelte-hooks.js?v=ddc96c07:341:9)
    at new ProxyComponent (proxy.js?v=ddc96c07:242:7)

System Info

System:
  OS: macOS 13.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 535.67 MB / 32.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
  Yarn: 1.22.19 - /opt/homebrew/bin/yarn
  npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
Browsers:
  Chrome: 113.0.5672.92
  Chrome Canary: 115.0.5771.0
  Firefox: 112.0.2
  Firefox Nightly: 111.0a1
  Safari: 16.2
  Safari Technology Preview: 16.4
npmPackages:
  svelte: ~3.57.0 => 3.57.0

Severity

annoyance

@brandonmcconnell brandonmcconnell changed the title Error when destructuring variables in {@const} Error when destructuring variables in slotted {@const} May 15, 2023
@dummdidumm
Copy link
Member

This works as expected - your hunch is right that you're declaring the @const in the default slot scope but then try to use it in the named slot scope, where it's not defined. Therefore closing. Svelte 5 makes this more obvious with using snippets/render tags instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants