-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null #2086
Comments
A very simple and well working workaround (not even a speed penalty so far) seems to be a |
I have also encountered this, but cannot reproduce at the moment. It went usually like this:
|
Same issue is happening to me while using Sapper when navigating randomly. Very hard to reproduce but it happens often enough for it to be a problem. I've also seen it happen when some library replaced DOM objects leaving it in a state that svelte is confused about. My temp fix is to change line 130 of node_modules/svelte/internal.mjs to:
UPDATE: in the latest version this is located at line 181. |
I was having the same exact issue while working with |
this is happening to me when I am using a hashchange event as well (not sure if that's the reason or not, but since someone else mentioned it) I am using an array that has values, then on a hash change, a filter is applied. Whenever that filter comes up with an empty array as the result, when there was something in the array to begin with, then this error seems to happen for me. assume
I'm seeing the issue in the same place ciri did. |
node.nextSibling -
I get error on first load, the detach calls from code above. Bug when I add description into head.
My bad, I've added description instead meta tag. Should be
|
In case it helps - |
I started to have this issue (randomly) once I upgraded to version 3.6.x |
If anyone can provide a repro, that'd be helpful |
This is happening to me when I try to use |
This occurs using sapper when I have a route define a <script>
let description = 'foobar'
</script>
<svelte:head>
<meta name="description" content="{description}"/>
</svelte:head> This is a hunch, but would it simplify things if |
Since this issue seems to pop up periodically, it would be useful to turn this into a warning. It may not be elegant, but it prevents surprise blank screens due to a navigation error. function detach(node) {
if (node && node.parentNode) node.parentNode.removeChild(node);
else if (node) console.warn('node ' + node + ' is detached. Please submit a bug report.');
else console.warn('node is falsy. Please submit a bug report.');
} |
Seeing this too since |
I forgot to mention in the original issue way back that I have a lot of data. Like 1 to 3 MB that is being passed around via |
I pushed a hotfix, based on v3.6.3 proposed by #2086 (comment) In package.json, under
I pushed the build files & tested it in my environment so this should work as is. |
@btakita your fix works great for me! No errors and the meta updates in the head of each route 😃. Is this fix going to be included in an actual release? |
These lines cause the error again when the button is clicked twice: https://gist.github.com/burningTyger/d21f7907820e46ad23bce0b845fb67b9#file-asz-svelte-L64-L79 I couldn't reproduce it in the REPL since this component needs a lot of data and I can't share it. The error might be of interest too:
|
@rwwagner90 I updated another hotfix branch to account for v2.6.5. It's at btakita/svelte#gh-2086-hotfix There have been some attempts to fix some of the root causes of calling I created a pull request to have the However, IMO, having the conditional in the I'm not sure where the core team currently stands on this issue & fix(es). IMO, the conditional needs to be added to I'll keep btakita/svelte#gh-2086-hotfix up to date with the latest release in the meantime. |
Prevent outro callback corruption
I'm still having this issue. Unfortunately, I could not find a way to replicate the issue on the REPL, so here it is in a repo: https://gitlab.com/tohlenforst/issue2086
Then just click on a link and then try to click a different link. |
Can reproduce this error on demand. svelte-material-ui has a component call 'snackbar'. Updating line 145 of 'node_modules/svelte/internal/index.mjs' to |
I have also been struggling with this while using a svelte-material-ui List component containing dynamically loaded FontAwesome SVG icons where I could load a list of the icons fine, then load another couple before the following exception is thrown :-
Applying the previous fix from @sinistra allows me to continue (Thanks for that sinistra much appreciated) For reference my dependencies are as follows:-
Not complaining, Svelte is AWESOME!! |
Why is this closed? I still have to manually add this to make my app work:
|
@InstanceOfMichael I can't comment on your specific use case but my issue is no longer reproducible against version
I am actually not sure if anything changed within Svelte or just reworking my code resolved the issue (I was previously not using a unique enough key within my {#each...}) I appreciate this probably doesn't help you but thought I would provide an update. |
I'm still facing this issue:
One very specific block of code that's causing this issue is this very simple
Removing this piece of code fixes the issue for me, But I cannot figure out why this is happening, the error triggers whenever there's an update to the store or any other reactive value. |
I seem to have a very similar issue to @jasdeepsingh (I'm on svelte
Weirdly this issue doesn't happen if I add some debug statements to the file with the
|
The upgrade to Svelte |
This answer is the only fix, that worked for me. I'm using Svelte 3.20.1 I'm using a third party library (sortable.js) where items are cloned into a dropzone. From there, they can be deleted again by a button (which removes the DOM node). Each item is a As soon as i delete an item out of the dropzone and try to change the route, the I also tried to add an additional wrapper within So, what is the point of not checking if there is a |
Should resolve some SEO issues. Also added meta tags. Also required a new Svelte version. There were bugs with aforementiend meta tags. sveltejs/svelte#2086
I am also having the above issue still, and I am trying to just use a dynamic component |
Is there a fix for this? I believe I am using svelte 3.23.2 (based on the Changelog.md file). The following works:
But if I uncomment the commented lines: it gives me the error mentioned above, if the If possible, I would prefer not to change the lines in internal.mjs, as suggested above. @burningTyger mentioned something about destroying the component and rerendering. Can someone please point out how I can do that? Would really appreciate your help. I am a svelte newbie. |
Just wanted to update with the things I tried: I searched some more for how I could destroy the content that was giving trouble and re-render. Then, I tried the solution suggested by @ciri. The file he mentions does not exist in svelte 3.23.2. But I found that content in both svelte/internal/index.js and svelte/internal/index.mjs. By itself, the solution did not work. Both of the above combined, however, do work. |
easily reproducible by embedding twitter or instagram embed widgets in sapper; |
Still running in this issue. I use a lot of dynamic components svelte:component that are leading into huge changes in the DOM (typically enterprise web application with many different tabs). I think it is related to the usage of svelte transitions. Made all of them to local transitions, but still running into this issue.
The code above fixes the error, but then my DOM is not correct and some elements are still there. Sometimes this is a crazy UI behaviour when something from an other Tab is merged into the new one. Is there any other solution? |
It fixed the error on my project too with: I can not understand why it should effect the DOM negativ like @torgebauer wrote. |
I am still having this issue. |
@orgertot & @torgebauer , where did you put this line? I don't find the root cause of my |
Please stop commenting on a closed issue. It's not helpful commenting on a closed issue, and even though you may get the same error, it may due to different reasons. So, please, if you need support on this, please comment your repro on this new issue i just created. @jycouet @sudomaxime @torgebauer @orgertot @shedali @clineamb @kilianso |
I couldn't reproduce the error in the repl and I also can't post the data since it is confidential.
I'll try to post as much information as possible though.
This is the component:
this works just fine.
later on when I change some props I do it like this:
sometimes it works, sometimes not. It renders the component but then fails and I can't change the data again.
This is the error message:
this seems to only happen with two nested loops and the imported component.
The text was updated successfully, but these errors were encountered: