Stencil version:
I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
When using the generated hydrate script in an SSR-rendered app some elements are incorrectly duplicated. (The blue square to the right of my button is a duplicated, empty button)
Expected behavior:
Hydrated components would only render once.
Steps to reproduce:
I've had trouble narrowing this down to a specific cause. You can reproduce it using this repo I put together: https://github.com/cloudfour/stencil-ssr-bug-reproduction
This is a simplified version of a project I'm working on which is why it is structured the way it is. I have a subdirectory housing my stencil components. Adjacent to that I have another subdirectory housing my express app. From the root directory you can run a number of commands.
In order to build my express app, I build my stencil components, copy the output into the express app, and then run the express app.
- Check out that repo
- Install dependencies for the components:
cd stencil-components, npm i, cd .. (from root)
- Install dependencies for my app:
cd express-app, npm i, cd .. (from root)
- Build my components and copy them into my express app
npm run build (from root)
- Run my express app:
npm run start:express (from root)
- Navigate to express app (http://localhost:3000/)
- See that the button has been duplicated
I had also reproduced this using the prerender option in my project, but didn't set up a sample repository for that. Let me know if that would be helpful.
Related code:
See repro directory above
Other information:
I originally reported this as a comment on #2366 . @peterpeterparker was kind enough to take a look and help me debug it. He suggested a change to vdom-annotations which seemed to work for me: #2366 (comment)
He asked me to open a new issue since his original issue had been resolved.
Thanks for the great library! I love working with Stencil and am excited to get my SSR working! Let me know if you need any other info from me 🙂
Stencil version:
I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
When using the generated hydrate script in an SSR-rendered app some elements are incorrectly duplicated. (The blue square to the right of my button is a duplicated, empty button)
Expected behavior:
Hydrated components would only render once.
Steps to reproduce:
I've had trouble narrowing this down to a specific cause. You can reproduce it using this repo I put together: https://github.com/cloudfour/stencil-ssr-bug-reproduction
This is a simplified version of a project I'm working on which is why it is structured the way it is. I have a subdirectory housing my stencil components. Adjacent to that I have another subdirectory housing my express app. From the root directory you can run a number of commands.
In order to build my express app, I build my stencil components, copy the output into the express app, and then run the express app.
cd stencil-components,npm i,cd ..(from root)cd express-app,npm i,cd ..(from root)npm run build(from root)npm run start:express(from root)I had also reproduced this using the
prerenderoption in my project, but didn't set up a sample repository for that. Let me know if that would be helpful.Related code:
See repro directory above
Other information:
I originally reported this as a comment on #2366 . @peterpeterparker was kind enough to take a look and help me debug it. He suggested a change to
vdom-annotationswhich seemed to work for me: #2366 (comment)He asked me to open a new issue since his original issue had been resolved.
Thanks for the great library! I love working with Stencil and am excited to get my SSR working! Let me know if you need any other info from me 🙂