Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the best practice to use Svelte with Katex load-time rendering?

See original GitHub issue

Describe the bug

My app has a component that adds or subtracts an input slider upon a button click. This worked fine, until, elsewhere in the document I added $ ... $ strings, and then used the Katex auto-render script:

  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>

to convert these into <span> ... </span> DOM subtrees. The conversion happens at DOMContentLoaded event.

The exception is:

index.mjs:356 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (http://localhost:5000/build/bundle.js:76:16)
    at insert_dev (http://localhost:5000/build/bundle.js:463:9)
    at Object.mount [as m] (http://localhost:5000/build/bundle.js:33047:8)
    at Object.update [as p] (http://localhost:5000/build/bundle.js:33565:28)
    at update (http://localhost:5000/build/bundle.js:291:40)
    at flush (http://localhost:5000/build/bundle.js:259:17)

What is strange is, these <span> ... </span> insertions are happening at places totally unrelated to the component that adds or subtracts the sliders.

In general, what is the recommended practice for using Svelte with a third-party library that also modifies the DOM? And, in particular, is there some rule to be able to tell when DOM manipulations outside of Svelte are safe for Svelte?

Reproduction

https://svelte.dev/repl/aa262f62727843ddb0c76a3c1ac28bf5?version=3.42.1

Simply uncomment the onMount() call to observe the error.

Logs

Error:
message: "Uncaught (in promise): Cannot read property 'insertBefore' of null"
stack: TypeError: Cannot read property 'insertBefore' of null
at insert (eval at handle_message (about:srcdoc:13:8), <anonymous>:47:16)
at insert_dev (eval at handle_message (about:srcdoc:13:8), <anonymous>:313:9)
at Object.mount [as m] (eval at handle_message (about:srcdoc:13:8), <anonymous>:413:8)
at Object.update [as p] (eval at handle_message (about:srcdoc:13:8), <anonymous>:548:26)
at update (eval at handle_message (about:srcdoc:13:8), <anonymous>:161:40)
at flush (eval at handle_message (about:srcdoc:13:8), <anonymous>:129:17)

System Info

Using Current Svelte REPL on:

Google Chrome	91.0.4472.114 (Official Build) (64-bit)
Revision	4bb19460e8d88c3446b360b0df8fd991fee49c0b-refs/branch-heads/4472@{#1496}
OS	Linux
JavaScript	V8 9.1.269.36