https://github.com/ewert-online/stencil-ssr-hydrate-reproduction
https://github.com/ewert-online/stencil-ssr-hydrate-reproduction
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ewert-online/stencil-ssr-hydrate-reproduction
- Owner: eWert-Online
- Created: 2022-06-07T14:35:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-26T12:48:33.000Z (almost 2 years ago)
- Last Synced: 2025-03-07T23:42:51.831Z (3 months ago)
- Language: SCSS
- Size: 2.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stencil SSR Hydrate Error Reproduction
## Intall and prepare
As a first step install the projects dependencies.
```
npm install
```
This installs all required dependencies and builds the project afterwards.
## Reproduce
To reproduce the bug, I've created an index.html which shows the error. In order to run and access it, run:
```
npm start
```
The `start` script will start a local web server on port 3333 which prerenders the `views/index.html`. In here, you can
see the same component placed twice on the page.
The first instance is placed inside an `app-section` component, which just renders its slotted content with a few
additional styles. As you can see, the slotted content does not get re-hydrated correctly. It instead appears twice on
the page.
The second instance is **not** nested inside the `app-section` component. Here you can see, that it gets rendered and
re-hydrated correctly.