Icon issue `Cannot read properties of null (reading 'insertBefore')`

[Knordy]

There seems to be an issue with the icons when navigating from a page that's a couple of layers deep to a page on the first layer, both in dev an production. In the browser console the following error is generated:

TypeError: Cannot read properties of null (reading 'insertBefore')

See the following sample repo: https://github.com/Knordy/nuxt-icon-issue, using the latest version 1.5.6

The steps to reproduce are:

• From Home click on A3
• From A3 click on A4
• From A4 click on B

Removing the icons does not trigger this error. Removing page A, A1 and A2, but keeping the depth of the pages does not trigger the error. Following various other navigation paths does not trigger the error: from Home -> A1 -> A4 -> B for example.

[antfu]

Thanks a lot for the great reproduction! I think this is an upstream bug with Vue's Suspense + Vue Router (https://github.com/vuejs/core/issues/5657) - this is also caused by NuxtIcon being an async component. I will see how I can workaround this before it get fixed in Vue.

[antfu]

cbb24cd4384afbe843ee1c9b9120dfea7203a94b should fix it

[Knordy]

@antfu Thank you for the update. We will verify if this also fixes the issue in our solution.