Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested slots with default value and store: Cannot read property 'value' of undefined #3763

Closed
iljabauer opened this issue Oct 21, 2019 · 2 comments · Fixed by #4514
Closed
Labels

Comments

@iljabauer
Copy link

Describe the bug
There is an Outer Component with a slot, which defaults to Inner component. Inner component consisting of an input field bound to a store writable object.
If we now pass something to the slot, e.g the Inner component surrounded by a div, input binding will break and log an "Cannot read property 'value' of undefined" error.

Logs

VM210:422 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
    at Object.update [as p] (eval at handle_message (VM204 about:srcdoc:13), <anonymous>:422:37)
    at update (eval at handle_message (VM204 about:srcdoc:13), <anonymous>:159:25)
    at flush (eval at handle_message (VM204 about:srcdoc:13), <anonymous>:133:17)
update @ VM210:422
update @ VM210:159
flush @ VM210:133
Promise.then (async)
schedule_update @ VM210:119
make_dirty @ VM210:219
eval @ VM210:253
eval @ VM210:444
set @ VM210:364
update @ VM210:372
input_input_handler @ VM210:447

To Reproduce
REPL 1 with bug: https://svelte.dev/repl/48555174f1a34bbe8268404c7a7f0b99?version=3.12.1
REPL 2 working without slot default: https://svelte.dev/repl/31a272fac83047c282a8fe721751a884?version=3.12.1

Expected behavior
It should work like REPL 2

Information about your Svelte project:

  • Your browser and the version: Chromium: 77.0.3865.120

  • Your operating system: OS X 10.15

  • Svelte version: 3.12.1

Severity
The bug is not urgent, as I can work around it by removing the slot default like in REPL 2. But its quite inconvenient

@Rich-Harris
Copy link
Member

The problem here is that the Inner component gets created whether or not there's a default slot:

function create_fragment(ctx) {
	var current;

	const default_slot_template = ctx.$$slots.default;
	const default_slot = create_slot(default_slot_template, ctx, null);

	var inner = new Inner({});

	return {...};
}

It then tries to update itself despite not having been 'created'. We need to ensure that components in slot fallback content are only created when appropriate.

@Conduitry
Copy link
Member

This has been fixed in 3.20.0 - https://svelte.dev/repl/48555174f1a34bbe8268404c7a7f0b99?version=3.20.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
4 participants