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

{expression} is invalid inside (...) since v5.2.8 #14466

Closed
sebadob opened this issue Nov 28, 2024 · 2 comments · Fixed by #14468
Closed

{expression} is invalid inside (...) since v5.2.8 #14466

sebadob opened this issue Nov 28, 2024 · 2 comments · Fixed by #14468
Labels

Comments

@sebadob
Copy link

sebadob commented Nov 28, 2024

Describe the bug

After an npm update (have been using Svelte 5.1.16 before), quite a few components fail to compile with an error message that does not make sense to me. I was able to pin down the version that broke everything for me. It happened with 5.2.8. When I pin the version to =5.2.7, everything is fine, but everything after does not even compile anymore.

{expression} is invalid inside <table>

It makes sense when you for instance put a div inside a td or something like that, which is not allowed by definition, but it don't get the issue in this situation:

<table
        aria-colcount={columnWidths.length}
        aria-rowcount={rowCount}
        style:width
        style:max-width={maxWidth}
>

The error message comes up for style:max-width={maxWidth}. It does not for the shorthand style:width, but it does even here if I use the long syntax style:width={width}. The error only shows up on the very first occurence of the issue, until I resolve this one, so I have no idea what other parts are affected. It might be a rabbit whole. For instance, 3 lines below I am doing something like <tr style:grid-template-columns={gridTemplateColumns()}> which fails as well with the exact same error, if I remove the lines above.

Bildschirmfoto_20241128_145652

Reproduction

When I get rid of everything else, I am doing the following:

<script lang="ts">
  let {maxWidth}: {maxWidth?: string} = $props();
</script>

<table style:max-width={maxWidth}>
</table>

Logs

No response

System Info

Working:

  System:
    OS: Linux 6.11 Fedora Linux 41 (KDE Plasma)
    CPU: (32) x64 AMD Ryzen 9 9950X 16-Core Processor
    Memory: 40.88 GB / 62.41 GB
    Container: Yes
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 22.11.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
  npmPackages:
    svelte: =5.2.7 => 5.2.7 

Broken:

  System:
    OS: Linux 6.11 Fedora Linux 41 (KDE Plasma)
    CPU: (32) x64 AMD Ryzen 9 9950X 16-Core Processor
    Memory: 40.69 GB / 62.41 GB
    Container: Yes
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 22.11.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
  npmPackages:
    svelte: ^5.2.8 => 5.2.10

Severity

blocking an upgrade

@dummdidumm
Copy link
Member

Came in through #14395

dummdidumm added a commit that referenced this issue Nov 28, 2024
… HTML

fixes #14466

The logic introduced in #14395 was flawed - not every text or expression outside the template is the child of an attribute. This turns it around: We know that every child of a fragment is inside the template, so we ignore all text/expression tags that are not child of a fragment
@sebadob
Copy link
Author

sebadob commented Nov 29, 2024

I can confirm that 5.2.11 fixes all issues for me, thanks a lot!

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

Successfully merging a pull request may close this issue.

3 participants