Skip to content

Different results in the SSR Vs CSR and problem with Vue SSR. #1993

@patrickalima98

Description

@patrickalima98

Stencil version:

 @stencil/core@1.7.4<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:
The stencil are creating different results in the RSS VS Client, this is a problem for the other libs/frameworks which have a vdom, for example is very bad to try use any lib or component built with the Stencil in a Nuxt Project Universal (SSR). The Vue'll throwing few errors when hydrating on CSR.

I'm using a plugin in my Nuxt Project, for use my Stencil components. Because the SSR and CSR have different outputs, I thing which is a problem with the StencilJS hydrate.

Expected behavior:
The code in SSR and CRS are the same, and Vue works fine.

Steps to reproduce:
1- clone my example git clone https://github.com/patrickalima98/stencil-nuxt.git
2- npm i
3- npm run dev
4- Open your browser in http://localhost:3000
5- Open the console browser and see the errors.

Other information:

On the assertNodeMatch:

SSR:

<bm-button color="is-primary" class="hydrated" s-id="1">
  <button class="button is-primary" c-id="1.0.0.0">
    <!--s.1.1.1.0.--><!--t.0.1--> Click Me! 
  </button>
</bm-button>

CSR, before vue hydration:

<bm-button color="is-primary" class="hydrated" s-id="1">
  Click Me!
</bm-button>

After vue & stencil hydration:

<bm-button color="is-primary" class="hydrated">
<!---->
  <button class="button is-primary hydrated">
    Click Me!
  </button>
</bm-button>

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions