TypeError: Cannot read property 'parentNode'

[claudijo]

Describe the bug Intermittent error in production code (a svelte / sapper project) when navigating and parts of the page is updated. Error message is Uncaught (in promise) TypeError: Cannot read property 'parentNode'

Logs From what I can tell from the stack trace and the source maps, the error originates from the file /svelete/internal/index.mjs and the following function (more specifically the line $$.fragment && $$.fragment.p($$.ctx, dirty);

function update($$) {
    if ($$.fragment !== null) {
        $$.update();
        run_all($$.before_update);
        const dirty = $$.dirty;
        $$.dirty = [-1];
        $$.fragment && $$.fragment.p($$.ctx, dirty);
        $$.after_update.forEach(add_render_callback);
    }
}

To Reproduce As always with intermittent issues, it is hard to reproduce reliably. Sorry for the vague description, but hopefully someone recognize the issue and can, if not offer a solution, perhaps offer some suggestions or workaround...

Information about your Svelte project:

• Your browser and the version: Chrome 86.0.4240.111 (Official Build) (x86_64)

• Your operating system: Mac OS 10.15.7

• Svelte version: 3.29.4 (- Sapper version: 0.28.10)

Project is built using rollup

Severity Once the issue occurs, all javascript stops working in the page and further navigation is not possible until reloading the page, so I would consider it quite severe.

[antony]

Having had a number of apps in production for quite some time and never seeing this, I would suggest that it is something in your code/some library causing this issue.

I would urge you to work to create a reproduction, and perhaps list out your dependencies, since I'm not sure what we can do based on this report alone.

[j3rem1e]

Last time I have seen this error is when using keyed each block with duplicates keys.

[antony]

Last time I have seen this error is when using keyed each block with duplicates keys.

That triggers a message saying "can't have duplicate keys in a keyed each block"

[j3rem1e]

Yes but only in dev mode iirc 😊

[claudijo]

Thanks for the suggestions, hunches such the one from @j3rem1e are much appreciated, even if that does not seems to be pointing at issue in the case.

Can't see that I have any application code that manipulates elements' parent nodes, and I don't use any DOM manipulating libs, which makes me suspect it is svelte internal code related to re-render parts of the page. Of course it is still far from unlikely that the application code is operating in some (inappropriate) way, which triggers the error.

Unfortunately, I can't reproduce the issue reliably.

[shayaulman]

I was facing the same issue, I kept getting the error Uncaught (in promise) TypeError: Cannot read property 'parentNode', (but not on every load, which made it impossible to reproduce).

It turned out that as I tried adding the Svelte app to an existing website, the DOM was not always ready when Svelte mounted. I ended up with this solution:

main.js

import App from './App.svelte';

export default (async () => {
  const target = await new Promise((resolve) => {
    if (document.body) {
      resolve(document.body);
    } else {
      document.addEventListener('DOMContentLoaded', () => resolve(document.body));
    }
  });

  const app = new App({
    target
  });

  return app;
})();

An alternative (and cleaner) solution is to just add the defer attribute to the script tag.

See also https://github.com/sveltejs/svelte/issues/656