text is undefined error with hydrated slotted component with default slot contents using bound computed properties

[jacobmischka]

The setup is as convoluted as the title suggests, ha. I'm trying to do something pretty stupid, so I'm not exactly surprised that things break, but I found it interesting it seems to happen only when all of these conditions are met.

Essentially, I'm trying to duplicate Vue's scoped slots using a bound property. The parent renders a slotted component, passing in data and receiving some transformed data back using a bound property. The slotted component has some default content which is being overridden from the parent, but both contents are rendered using the same computed value.

This all works in a normal component, but it breaks when the component is hydrated after being server rendered. As such, if using Sapper you navigate to the page, everything works, but if you reload the page it breaks. Additionally, if the slotted child doesn't have any default content, everything works fine as well.

Repro repo

(That HMR error is unrelated, the same thing happens when running in production mode).

Parent:

<Layout page='about'>
	<Slotted num="{{num}}" bind:computedNum="computedNum">
		<p style="color: red;">
			{{computedNum}}
		</p>
	</Slotted>
</Layout>

<script>
	import Layout from './_components/Layout.html';
	import Slotted from './_components/Slotted.html';

	export default {
		data() {
			return {
				num: 1
			};
		},
		components: {
			Layout,
			Slotted
		}
	};
</script>

Slotted child:

<select bind:value="someState">
	<option>a</option>
	<option>b</option>
	<option>c</option>
</select>

<slot>
	<span>{{computedNum}}</span>
</slot>

{{someState}}

<script>
	export default {
		data() {
			return {
				someState: 'a'
			};
		},
		computed: {
			computedNum(num, someState) {
				if (!num)
					return;

				return `${someState}:${num}`;
			}
		}
	};
</script>

Thanks!

[Rich-Harris]

Finally taking a poke at this — it's a hell of a bug. Think I've whittled it down to this — if the default slotted content has anything dynamic, it causes problems.

Your repro was using Sapper 0.5.1 which actually got hydrating backwards (the only time it didn't hydrate was on the first load), so this isn't a hydration bug per se.

Closing in on a fix...

[Rich-Harris]

Fixed in 1.56 — thanks

[jacobmischka]

Woo thanks, nice work!