bug: stencil hydrate not calling globalScript in version 4.17.0 onwards #6002
Labels
Comments
christian-bromann
added
Bug: Validated
|
@felipeyukio182 thanks for raising an issue and providing a reproducible example. Our team currently has a lot of competing priorities and we can't say when we are able to take a look at this. We would appreciate any support in form of investigation on the root cause or actual fixes. We are happy to answer any technical questions as they arise. |
2 tasks
|
A fix for this has been released in Stencil |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Stencil Version
4.17.0
Current Behavior
I have an angular SSR application and use the stencil hydrate. Until version 4.16.0, I had no problems hydrating my server-side components, but from 4.17.0 onwards the globalScript initialization code stopped working, it seemed that they were not called.
I run the following initialization script from global-script-start.ts:
In stencil.config:
globalScript: 'src/global-script-start.ts',When I run my SSR application, I call the "renderToString" function of the stencil hydrate and send the result to the client. But even though the html is hydrated, this initialization script appears not to have been called, and the css variable "--stencil-custom-color" is not set.
Before version 4.17.0, this script ran without problems and the CSS variable "--stencil-custom-color" was included with the
<html>tag.I checked the changelog from 4.16.0 to 4.17.0, and noticed that bundler was migrated from rollup to esbuild.
Could there be something related to this? Or am I missing something?
Expected Behavior
When I call the renderToString function, the script inside
global-script-start.tsshould be executed, and the CSS variable "--stencil-custom-color" should be set inside the<html>tag of the renderToString response.System Info
System: node 20.13.1 Platform: windows (10.0.19045) CPU Model: Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 cpus) Compiler: C:\Users\felipe.fupunaga\Documents\Projetos\outros\stencil-hydration-global-script-test\node_modules\@stencil\core\compiler\stencil.js Build: 1724698030 Stencil: 4.21.0 TypeScript: 5.5.3 Rollup: 2.56.3 Parse5: 7.1.2 jQuery: 4.0.0-pre Terser: 5.31.1Steps to Reproduce
Run the following:
Then access http://localhost:4000/ with the network tab open and compare the html preview coming from the server with the html rendered on the page.
The client-side html will have the CSS variable "--stencil-custom-color" (text with green color) while the server-side html will not have any css variable in the
<html>tag (text with red color). You can also see the blinking effect from red to green.For comparison, I created the stencil-v4.16.0 branch, where it is possible to run the same test. In this branch, both the client-side and server-side responses contain the css variable "--stencil-custom-color" and both responses contain green text.
Code Reproduction URL
https://github.com/felipeyukio182/stencil-hydration-global-script-test
Additional Information
When i run the main branch, this is the response:
When i run the stencil-v4.16.0 branch, the html from server-side and client-side are the same:
And the html from server have the "--stencil-custom-color" CSS variable:
The text was updated successfully, but these errors were encountered: