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 using enhanced:img (CSR and inside div) #14279

Open
timephy opened this issue Nov 12, 2024 · 2 comments
Open

Error when using enhanced:img (CSR and inside div) #14279

timephy opened this issue Nov 12, 2024 · 2 comments
Labels
awaiting submitter needs a reproduction, or clarification

Comments

@timephy
Copy link

timephy commented Nov 12, 2024

Describe the bug

I have a page that uses <enhanced:img>, it is built using adapter-static.

<div>
    <enhanced:img src="$images/cover.jpeg?w=500;1000;1500;2000" alt="" />
</div>

build and check report no error, but when accessing the site I get this weird client runtime error:

Uncaught (in promise) TypeError: Illegal invocation
    at k (runtime.B6UWzKrK.js:1:2756)
    at Zn (runtime.B6UWzKrK.js:1:2227)
    at d (2.6eHHlTyd.js:1:1572)
    at app.CC3Bztr1.js:2:7895
    at app.CC3Bztr1.js:2:3429
    at Lt (runtime.B6UWzKrK.js:1:7538)
    at W (runtime.B6UWzKrK.js:1:8229)
    at P (runtime.B6UWzKrK.js:1:4260)
    at ur (runtime.B6UWzKrK.js:1:4993)
    at app.CC3Bztr1.js:2:3423

When disabling CSR, it does not error (no client side code.. of course)...
When putting the img in the root of the file, it does not error (weird...), however a hydration_mismatch warning is logged to the console anyway (should this be?)

Reproduction

https://github.com/timephy/svelte-5-weird-runtime-error

This page errors, it is using CSR and <enhanced:img> is inside a <div>.
https://timephy.github.io/svelte-5-weird-runtime-error

This page does not error, CSR is disabled.
https://timephy.github.io/svelte-5-weird-runtime-error/working_no_csr

This page does not error, <enhanced:img> is in the root of the file.
https://timephy.github.io/svelte-5-weird-runtime-error/working_root_img
⚠️ However I get a hydration_mismatch warning!

Logs

No response

System Info

System:
    OS: macOS 15.1
    CPU: (20) x64 Intel(R) Xeon(R) W-2150B CPU @ 3.00GHz
    Memory: 7.96 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 23.1.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: 9.12.3 - /usr/local/bin/pnpm
    bun: 1.0.25 - /usr/local/bin/bun
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.1
  npmPackages:
    svelte: ^5.1.15 => 5.1.15

Note

❗❗❗ All of this only happens on build > preview and not during dev!

Severity

blocking all usage of svelte

@timephy timephy changed the title Cryptic Error when using CSR and enhanced:img Error when using CSR and enhanced:img inside div Nov 12, 2024
@timephy timephy changed the title Error when using CSR and enhanced:img inside div Error when using enhanced:img (CSR and inside div) Nov 12, 2024
@yanneves
Copy link

For searchability, this errors with the following message in Firefox:

TypeError: 'get nextSibling' called on an object that does not implement interface Node.

@dummdidumm
Copy link
Member

dummdidumm commented Nov 15, 2024

Please check again with 5.2.0 and report back if the error still persists (it contained an overhaul of the related code which fixed a related issue, so this one might be fixed, too)

@dummdidumm dummdidumm added the awaiting submitter needs a reproduction, or clarification label Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting submitter needs a reproduction, or clarification
Projects
None yet
Development

No branches or pull requests

3 participants