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.

Sign up for GitHub

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

Jump to bottom

bug: hydrate crashes if head element with link tag exists #5870

Closed
3 tasks done
mayerraphael opened this issue Jun 28, 2024 · 4 comments
Closed
3 tasks done

bug: hydrate crashes if head element with link tag exists #5870

mayerraphael opened this issue Jun 28, 2024 · 4 comments
Assignees
@christian-bromann
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil

Comments

@mayerraphael
Copy link

mayerraphael commented Jun 28, 2024 •
edited
Loading

Prerequisites

Stencil Version

4.19.0

Current Behavior

Hydrate crashes if a full document is hydrated with serializeShadowRoot: false

unhandledRejection Error: referenceNode not found in parentNode.childNodes
    at insertBefore (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:13860:15)
    at _MockDocument.insertBefore (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:13071:7)
    at addStyle (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:548:30)
    at attachStyles (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:566:20)
    at updateComponent (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:1175:5)
    at C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:1162:38
    at enqueue (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:1167:6)
    at dispatchHooks (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:1162:10)
    at dispatch (C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:1136:26)
    at C:\dev\ssr-stencil-test\dsd-ssr\hydrate\index.js:2039:7

This only happens if a <link ... > tag is inside the <head>

Happens inside the addStyle() -> insertBefore() method (see trace).

Expected Behavior

No crashes.

System Info

No response

Steps to Reproduce

  • See repo, set serializeShadowRoot to false in server.js.

Code Reproduction URL

https://github.com/mayerraphael/stencil-dsd-ssr-playground

Additional Information

server.js

const html = await hydrate.renderToString(
    `<html>
    <head>
      <link rel="stylesheet" href="whatever.css" >
    </head>

    <body>
      <div class="__next">
        <main>
          <my-component last-page="5"></my-component>
          <my-whatever-component>abc</my-whatever-component>
          <div class="my-5">
            <my-other-component label="2"></my-other-component>
          </div>
          <my-component last-page="2"></my-component>
        </main>
      </div>
    
      <script type="module">
          import { defineCustomElements } from "./static/loader/index.js";
          defineCustomElements().catch(console.error);
      </script>
    </body>
    </html>`,
    { fullDocument: true, serializeShadowRoot: false },
  );
@ionitron-bot ionitron-bot bot added the triage label Jun 28, 2024
@mayerraphael mayerraphael mentioned this issue Jun 28, 2024
Merged
2 tasks
@christian-bromann christian-bromann self-assigned this Jun 28, 2024
@christian-bromann christian-bromann added Bug: Validated This PR or Issue is verified to be a bug within Stencil and removed triage labels Jun 28, 2024
@sean-perkins sean-perkins mentioned this issue Jun 28, 2024
Closed
3 tasks
@christian-bromann
Copy link
Member

This should get resolved with #5876 which is currently being reviewed. You can use @stencil/[email protected] which is a dev release that contains this fix.

@ptmkenny
Copy link

ptmkenny commented Jul 1, 2024

Since the Ionic starter apps have a <link> inside <head>, it would be great if there was an automated test against the starter apps to catch issues like this.

@christian-bromann
Copy link
Member

@ptmkenny thanks for the feedback @ptmkenny! We will evaluate this with the framework and Stencil team whether this is feasible for us as it requires running these starter apps with a custom compiled Ionic Framework version that uses a custom compiled Stencil version. Overall we have much better test coverage for these edge cases now which makes it less likely that these bugs happen again.

@christian-bromann
Copy link
Member

Closing as this has been resolved and was released with the last Stencil version.

@longhotsummer longhotsummer mentioned this issue Aug 1, 2024
Closed
@ptmkenny ptmkenny mentioned this issue Sep 18, 2024
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christian-bromann christian-bromann

Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@christian-bromann @ptmkenny @mayerraphael