Vue version

3.3.4

Link to minimal reproduction

https://github.com/Disservin/vue-dynamic-import-css Vue Playground Link

• simplified

Steps to reproduce

npm install
npm run dev

What is expected?

I'd expect no TypeError's and that the component is properly mounted and has my dynamic class.

What is actually happening?

Open your browser console and you should be greeted by a TypeError.

TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

System Info

No response

Any additional comments?

If you comment out the following part in the Foo Component, you get no error.

.hover-link {
    padding: v-bind("bindings.padding") px;
}

or if you remove the class from the component :class="loading ? 'classA' : 'classB'"

    <component
        :is="getComponent()"
        :id="component.id"
        :settings="component.settings"
        :class="loading ? 'classA' : 'classB'"
    />

It seems to me that for some reason async components are missing the parentNode and thus the error?

When looking at the created instances, there are actually two, I guess that makes sense ?

{uid: 6, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
{uid: 4, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}

From what I can tell they are for classB and classA, respectively, but uid: 4 has no subTree.el.parentNode while uid: 6 has it?

I think someone reported the same bug in Pinia but with a boiled down repro so I added it here simplified

Ah nice, seems to be related, thanks for the smaller reproduction! I initially encountered this also with my pinia store, but then I figured out that it isnt related to pinia.
Weirdly enough you can get rid of the error in my reproduction if you do these changes

-    <component
-        :is="getComponent()"
-        :id="component.id"
-        :settings="component.settings"
-        :class="loading ? 'classA' : 'classB'"
-    />
+    <MyComp
+        :id="component.id"
+        :settings="component.settings"
+        :class="loading ? 'classA' : 'classB'"
+    />

-const getComponent = () => {
-    return defineAsyncComponent(() => Promise.resolve(VFoo));
-};

+const MyComp = defineAsyncComponent(() => Promise.resolve(VFoo));

Do we have any updates on this? I reported a bug (#9617) a while ago that was then mentioned as a possible duplicate of this.