<g-link> doesn't actually change pages on build - Hydration issue

Description

<g-link> updates the page title (in the browser tabs) and loads things like the console log but it does not change what I see on the page without reloading. In gridsome develop this is not an issue but gridsome build it fails.

I’m assuming I might have invalid HTML somewhere, but perhaps it could be something else, any suggestions?

I’ve looked at a lot of other similar g-link issues like https://github.com/gridsome/gridsome/issues/337 but to no prevail.

Steps to reproduce

https://github.com/element-softworks/atobtyres

Expected result

<g-link> should hydrate the pages without having to reload the page manually

Actual result

The page does visually not change unless I reload the page, I do think the code is loaded, just the view doesn’t seem to change.

Environment

Libs:
- gridsome version: 0.6.6
- @gridsome/cli version: 0.2.0


Browser:
- [x] Chrome (desktop) version
- [x] Chrome (iOS) version
- [x] Safari (desktop) version
 
For Tooling issues:
- Node version: 10.13  
- Platform: Mac

[mschmidtkorth]

I’ve added another minimalistic repository to reproduce the failure with valid routes.

You can see that once you change the HTML from

<div>
	This is: INDEX
</div>

to

<div>
	This is: <strong>INDEX</strong>
</div

the page loads successfully again. It looks like gridsome is trying to access child nodes of the page which do not exist (my assumption is based on the fact that I saw Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method on my production site).

For both sample repos no error message is shown and they work flawlessly in develop mode.

---

Generally I’ve seen (and read about) hydration issues pop up around:

• A component producing HTML and wrapping the component in a tag which is not allowed (e.g. <p><Component /></p> or <p><Component><p><template name="test"></p></Component></p> where the component wraps its slot around <p> already (nested paragraphs are not allowed))
  • Using v-html to dynamically parse HTML: <p v-html="var" /> where var = <p>Text</p> (nested paragraphs are not allowed)
• Nested <g-link>
• Using data-netlify="true" in forms
• Using beforeMount
• Using dynamically generated content
• Using <g-link> as root component of a page
• Using <g-link> without a trailing slash
• Using HTML entities such as <div>&nbsp;</div> instead of <div class="..."></div>
• Having a comment that contains a component’s markup - e.g. <!-- <Social /> --> as this will show up as <!----> and cause a appendChild() exception
• <transition> tags generate <span> which may not have <div> as children - use <transition tag='div'>
• Disable HTML minification e.g. in netlify settings
• Make sure all routes via <g-link> lead to valid paths
• ? Having no data() method or one returning nothing instead of return {}
• ? Invalid code like having an object returning something instead of a method (e.g. metaInfo: {return{}} instead of metaInfo() {return{}})

[AustinGil]

Two options I think could be acceptable would be that it breaks during development in the same way it breaks during production build. Or it at least gives a console warning if there’s invalid HTML. I mean, ideally a developer knows how to avoid invalid HTML, but machines are way better than humans at that.