javascriptvue.jsdomvue-componentv-for

DOMException occurred in Vue: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this

Here is my vue project and the bug occurred like this:

  1. git clone https://github.com/dongrixinyu/JioNLP_online 【I have pushed my branch to the public github】
  2. cd JioNLP_online && npm run serve
  3. now we have started a local frontend server with an ip and port
  4. open the brower and paste http://ip:port/lecture/lecture_home_page,and you could see the below webpage, the left navigation part is empty.

enter image description here

besides, the error printed in the console is like this:

enter image description here

and the wrong element is like this:

enter image description here

5，reopen an empty tab page and open http://ip:port/jionlp_online, and then jump from this link to the 【NLP教程】navigation bar. now we can see the correct rendering of the navigation part like below:

enter image description here

and the element is now correct like below:

enter image description here

The key problem is open the link http://ip:port/lecture/lecture_home_page directly could cause the failed navigation rendering error.

the corresponing vue components code is in LectureNavigation.vue:

enter image description here

the corresponding navigation content is requested in the mounted method from my public backend server.

this bug has already confused me for about one month.

Does anybody could help me check it? Thanks very much!!!

Solution

  • Your issue stemmed from package incompatibilities.

    You were using vue@3 + @vue/composition-api@1. Apart from those, you had quite a few linting and typescript errors and some missing dependencies.

    To save time, I created a new Vue3 project (with typescript, vuex & router) and copy/pasted your components & folders into it. I added the missing dependencies and fixed a bunch of linting and ts errors.

    When serving, I always get the sidebar when navigating to /lecture/lecture_home_page:

    enter image description here

    PR-ed here. Read the notes.

    Take some time to read (and fix) all the Vue warnings in console. Some of them are important.