insertBefore crashes with "null is not an object (evaluating 'insertBefore')" when parent is null

[iterox]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.43.5 (also present on main/nightly 4.44.0-dev)

Current Behavior

We see ~20 crashes/week, exclusively on iOS Safari. We strongly suspect Safari's page-translation/Reader feature mutates light-DOM slotted nodes, detaching them so parentNode becomes null during a re-render (same class of problem as Google-Translate-breaks-React). The unguarded access then throws. Suggested fix: if (parent?.insertBefore) { … } (or parent != null && parent.insertBefore), consistent with the already null-safe fallback branch. Repro: No deterministic repro; occurs on shadow: false/scoped components under Safari-side DOM mutation.

Expected Behavior

In src/runtime/vdom/vdom-render.ts, the insertBefore helper guards the fallback path against a null parent, but not the insertBefore path:

if (parent.__insertBefore) {                 // ← unguarded, throws if parent === null
  return parent.__insertBefore(newNode, reference);
} else {
  return parent?.insertBefore(newNode, reference);   // ← already null-safe
}

Steps to Reproduce

We see ~20 crashes/week, exclusively on iOS Safari. We strongly suspect Safari's page-translation/Reader feature mutates light-DOM slotted nodes, detaching them so parentNode becomes null during a re-render (same class of problem as Google-Translate-breaks-React). The unguarded access then throws. Suggested fix: if (parent?.insertBefore) { … } (or parent != null && parent.insertBefore), consistent with the already null-safe fallback branch. Repro: No deterministic repro; occurs on shadow: false/scoped components under Safari-side DOM mutation.

Code Reproduction URL

https://github.com/dso-toolkit/dso-toolkit/

PR with patch

dso-toolkit/dso-toolkit#3921

Additional Information

No response

[johnjenkins]

hey @iterox - thanks for raising. This is obviously quite difficult for me to repro - however I trust this is an issue for you and would probably accept a PR if you would like to raise one.
My only reservation would be .. would this fix just silently mask the underlying issue? Do you have any thoughts around that?
How do your non-shadow components continue to behave with your guard applied when there is no parent?

[github-actions]

We need a minimal reproduction to be able to triage this issue.

Why do we need a minimal reproduction?

Reproductions allow the team to triage and fix issues quickly with a tiny team. They help us identify the source of the problem and verify that the issue is not caused by something specific to your project.

How can I create a reproduction?

Please use our Stencil Starter to create a minimal reproduction.

Other starter templates

Template	CodeSandbox
Stencil + Vitest	stencil-starter-vitest
Angular	stencil-angular-starter
NextJs	stencil-starter-next
React	stencil-starter-react
Vue	stencil-starter-vue

A reproduction should be as minimal as possible. This means removing any code that is not directly related to the issue. The less code there is, the easier it is to identify the problem.

You can also provide a link to a public GitHub repository that demonstrates the issue.

What happens next?

• If you provide a valid reproduction link, this issue will be triaged and addressed based on priority.
• If no reproduction is provided within 14 days, this issue may be automatically closed.
• You can always reopen the issue by providing a reproduction link.

---

Resources:

• How to create a Minimal, Reproducible Example
• The Importance of Reproductions