Using the next branch cause errors with server side rendering

[pajtai]

Getting the following error on the next branch:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

code looks like:

        <div class="overflow" >
            <v-touch class="inner"
                 :style="innerStyle"
                 v-on:swipeleft="next"
                 v-on:swiperight="prev" >
                <slot></slot>
            </v-touch>
        </div> 

I know it's the v-touch component causing the error, since when I delete the component, the error goes away.

[LinusBorg]

Can you provide a repository with a reproduction of this problem, please?

Thanks!

[LinusBorg]

It seems even just requiring Hammer on the server is creating trouble during server-side rendering, so I will have to see what I can do about that at all.

hammerjs/hammer.js#1060

[LinusBorg]

I think a possible solution would be to provide a stubbed version of v-touch with the package. to alias hammerjs to an empty stub, and add a check to the v-touch component that it only sets up Hammer Recognizers when !this.$isServer

This stub would basically be a functionless component expect for the tag prop, and it would not not require Hammer (there's no use for it on the server anyway).

The user can then use a webpack alias in his SSR webpack config to load this in place of the normal module:

'hammerjs$': 'vue-touch/hammer-stub.js'

I'll fit this in somewhere the next week.

TODO:

• remove hammer require from index.js (not nessessary)
• add check for this.$isServer to the component's mounted() event so that Recognizers are only setup if not on the server.
• create module hammer-stub.js ehich exports an empty module.
• update build process to copy this module to the /dist folder.
• Update README
• add tests (this will be tricky i think)

[pajtai]

The issue might be that I stubbed out all of vue touch on the server. I'm using Webpack aliases to have separate server and client side versions. Now that I think about it, that would make sense as to the cause of the problem.

I will try and send you a repo to show what I'm doing, but might take a while, since this is gonna be a busy work week.

Thanks for starting to look into it.

[LinusBorg]

@pajtai I don't think the repo is nessessary anymore, already working on the solution.

[LinusBorg]

Now available in v2.0.0-beta.2

[gokhanozdemir]

Hello,

I have embeded with the ssr workaround to the vue next.js. The stuff is working however it brokes the DOM and I am getting 'the client-side rendered virtual DOM tree is not matching server-rendered content...'

using beta-4

[LinusBorg]

Thanks for reporting back.

Please open an issue and provide a reproduction that I can use to see the problem in action.