Subscribe on changes!

Cannot add custom ts class obj to reactive array: Uncaught (in promise) TypeError: parent is null

avatar
Aug 29th 2021

Version

3.2.6

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Click on the add button, a new element should appear in the currently empty list. You find the error in the dev console.

What is expected?

That the add() method adds a element to the array.

class InputUI {
  public title: string;
  public icon: string;
  public key: string;

  constructor(title: string, icon: string, key: string) {
    this.icon = icon;
    this.key = key;
    this.title = title;
  }
}
 const currentList: Array<InputUI> = reactive(new Array<InputUI>());
   const add = () => {
      currentList.push(
          new InputUI("test", "fa-key", "key")
      );
    }

What is actually happening?

17:14:31.816 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <FormsManagerForms3 onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <FormsManagerEdit onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <MainContent> 
  at <FormsManagerIndex onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <APPHOME onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:6873
17:14:31.830 Uncaught (in promise) TypeError: parent is null
    insert runtime-dom.esm-bundler.js:10
    mountElement runtime-core.esm-bundler.js:4148
    processElement runtime-core.esm-bundler.js:4068
    patch runtime-core.esm-bundler.js:3988
    patchKeyedChildren runtime-core.esm-bundler.js:4797
    patchChildren runtime-core.esm-bundler.js:4680
    processFragment runtime-core.esm-bundler.js:4385
    patch runtime-core.esm-bundler.js:3984
    patchBlockChildren runtime-core.esm-bundler.js:4305
    patchElement runtime-core.esm-bundler.js:4213
    processElement runtime-core.esm-bundler.js:4071
    patch runtime-core.esm-bundler.js:3988
    componentUpdateFn runtime-core.esm-bundler.js:4606
    run reactivity.esm-bundler.js:160
    callWithErrorHandling runtime-core.esm-bundler.js:6990
    flushJobs runtime-core.esm-bundler.js:7221
    promise callback*queueFlush runtime-core.esm-bundler.js:7120
    queueJob runtime-core.esm-bundler.js:7114
    effect runtime-core.esm-bundler.js:4638
    triggerEffects reactivity.esm-bundler.js:358
    trigger reactivity.esm-bundler.js:343
    set reactivity.esm-bundler.js:472
    key reactivity.esm-bundler.js:398
    add FormsDragDropSimple.vue:96
    callWithErrorHandling runtime-core.esm-bundler.js:6990
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:6999
    invoker runtime-dom.esm-bundler.js:347
    addEventListener runtime-dom.esm-bundler.js:297
    patchEvent runtime-dom.esm-bundler.js:315
    patchProp runtime-dom.esm-bundler.js:379
    mountElement runtime-core.esm-bundler.js:4105
    processElement runtime-core.esm-bundler.js:4068
    patch runtime-core.esm-bundler.js:3988
    componentUpdateFn runtime-core.esm-bundler.js:4536
    run reactivity.esm-bundler.js:160
    setupRenderEffect runtime-core.esm-bundler.js:4655
    mountComponent runtime-core.esm-bundler.js:4438
    processComponent runtime-core.esm-bundler.js:4396
    patch runtime-core.esm-bundler.js:3991
    mountChildren runtime-core.esm-bundler.js:4187
    mountElement runtime-core.esm-bundler.js:4096
    processElement runtime-core.esm-bundler.js:4068
    patch runtime-core.esm-bundler.js:3988
    mountChildren runtime-core.esm-bundler.js:4187
    mountElement runtime-core.esm-bundler.js:4096
    processElement runtime-core.esm-bundler.js:4068
    patch runtime-core.esm-bundler.js:3988
    mountChildren runtime-core.esm-bundler.js:4187
    mountElement runtime-core.esm-bundler.js:4096
    processElement runtime-core.esm-bundler.js:4068
    patch runtime-core.esm-bundler.js:3988
    componentUpdateFn runtime-core.esm-bundler.js:4536
    run reactivity.esm-bundler.js:160
    setupRenderEffect runtime-core.esm-bundler.js:4655
    mountComponent runtime-core.esm-bundler.js:4438
runtime-dom.esm-bundler.js:10

I got this error several times when trying to fix my problem. However, the error remains the same.

avatar
Aug 30th 2021

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

Maybe you need to use markRaw() (look it up in documentation)

avatar
Aug 31st 2021

Here when you get rid of whitespaces, the fragment node that wraps the v-for will also be deleted.

//exposed methods
    set: function (el, lmddOptions) {
      if (!el.lmdd) {
        clean(el); //get rid of whitespaces       <---------------
        el.lmdd = true;
        el.lmddOptions = assignOptions(options, lmddOptions); //create options object
        el.addEventListener("mousedown", eventManager, false);
        document.addEventListener("drag", muteEvent, false);
        document.addEventListener("dragstart", muteEvent, false);
        window.addEventListener("touchstart", simulateMouseEvent);
        window.addEventListener("touchmove", simulateMouseEvent, {
          passive: false
        });
        window.addEventListener("touchend", simulateMouseEvent);
      }
    },
avatar
Sep 3rd 2021

Hello @ygj6, thank you for your solution/hint, it solved my problem. Is there a way for vue to print out better debug messages? Now I'm able to understand the message but it would be easier, if the message would be much more intuitive...