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

No parent node when detaching #3187

Closed
matyunya opened this issue Jul 6, 2019 · 4 comments
Closed

No parent node when detaching #3187

matyunya opened this issue Jul 6, 2019 · 4 comments
Labels

Comments

@matyunya
Copy link

matyunya commented Jul 6, 2019

This is basicaly the same issue, parent node is null when detach is called.

sveltejs/sapper-template#158

@Conduitry
Copy link
Member

This seems similar to #3113.

This is reproducible without Sapper, as follows:

<!-- App.svelte -->
<script>
	import Widget from './Widget.svelte';
	let flag = false;
</script>

<input type='checkbox' bind:checked={flag}>

<svelte:component this={flag && Widget}/>
<!-- Widget.svelte -->
<svelte:head>
	<meta value='hey'>
</svelte:head>

This does seem like a bug in Svelte. I don't think the correct solution will be to just put in a null check in detach in Svelte (as in #3188), and I'm almost positive the correct solution is not to put in a null check in Sapper's detach (as in sveltejs/sapper#793).

@btakita
Copy link
Contributor

btakita commented Jul 7, 2019

I had the same pr as well. #3156

I think this is the correct fix for reasons mentioned in #3156 (comment)

The main reason why is svelte cannot stop outside code from removing elements from the DOM. detach needs to do the check or this error will occur. It is practically impossible to create a moat around this issue without the logic being in detach. Sure, it could be done with a MutationObserver & keeping track of all of the DOM elements that detach could call. Or, this 1 line fix could be used & this issue goes away for good.

Also see for a further explanation #2086 (comment)

@Rich-Harris
Copy link
Member

This should be fixed in 3.6.7, so I'll close this issue. Thanks

@hdoro
Copy link

hdoro commented Sep 6, 2019

This problem's been solved with meta tags, but whenever I attempt to add html attributes, I still get this error. This seems to behave differently in a Sapper environment (base template) and in Svelte's repl:

This REPL is a very minimal example of combining a title and meta elements works fine, but how <html lang="en" /> actually adds an html element to the head. Just open dev tools and take a look at the iframe's head 😉

Meanwhile, in a sapper environment (code on Glitch.com), this actually does work setting up the html's lang attribute, but the rest of the head gets dumped into the body, and that dreaded TypeError: Cannot read property 'parentNode' of null error shows up.

Let me know how I can help further debugging and feel free to remix the Glitch environment 😄

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

No branches or pull requests

5 participants