Nuxt.js: [edge] [nuxt] Error while initializing app DOMException

[nallown]

_Edit:_ I solved the problem you can find the solution in this comment https://github.com/nuxt/nuxt.js/issues/3575#issuecomment-411246148

Version

2

Reproduction link

https://test.twist.moe/a/07-ghost/1

Steps to reproduce

1. Go to the reproduction link
2. Login with username: public and password: not
3. Check Dev-Tools console

What is expected ?

The website should render fine and it should play the video.

What is actually happening?

It throws an error in the console.

Additional comments?

I tried to upgrade my nuxt version to 2.0 and I get the following error:

[nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

I've updated the Nuxt version to nuxt-edge and I also updated other node modules version to work with nuxt-edge and webpack 4. I freshly installed the node_modules so I removed the folder and ran a fresh npm i. When I run the dev version of the build, it works fine. It only fails with the production build. All the unit test pass just like they did before I only started getting this error after the nuxt-edge and webpack 4 upgrade. The website works fine and everything builds without a error, there were no issues until I upgraded my project to nuxt-edge and started the nuxt server in production.

I can give you access to the repository the project is very easy to setup, the dev version of the project works without internet, it uses mock network requests for the API. Just ask and I can give you access.

_{This bug report is available on Nuxt community (#c7430)}

[manniL]

Related: #1552, #1248, #2264

[nallown]

It only happens on nuxt-edge for me and not 1.4.1. In 1.4.1 it builds and runs perfectly fine. So something changed in nuxt-edge that broke the code.

[kball]

I get a bug that looks the same in nuxt 1.4.0 - issue appears to be related to code that has a v-if inside of a v-for, when hydrating after a server refresh. Navigating client side only has no issues. Workaround is to find ways to change the v-if to v-show.

[nallown]

@kball My code worked fine in 1.4.0 the error happened because I upgraded my project from nuxt 1.4.1 to nuxt-edge (2.0.0). I still checked though and found no v-if inside any v-for.

[Atinux]

I just went to the website and I see no error in the console.

Is it fixed? If so, what did you change?

[nallown]

There was a nested v-if inside another v-if that broke the change so I swapped out the first v-if with a v-show

      <div v-if="message" class="msg-container" :class="message.type">  
        {{ message.text }}  
        <button 
          v-if="message.type === 'error'"       <!-- nested v-if -->
          v-on:click="() => {   
            message = null; 
            media.load();   
            media.play();   
          }">Retry</button> 
       </div>   

I changed that into

      <!-- I replaced the top v-if with v-show -->
      <div v-show="message" class="msg-container" :class="message.type">    
        {{ message.text }}  
        <button 
          v-if="message.type === 'error'"   <!-- nested v-if -->
          v-on:click="() => {   
            message = null; 
            media.load();   
            media.play();   
          }">Retry</button> 
       </div>   

[Atinux]

Thank you @nallown

Indeed, this issue is really weird but it's due to vue-server-renderer that get crazy sometimes with v-if.

Closing the issue.

[cmty[bot]]

This bug-report has been cancelled by @Atinux.

Fixed by using v-show instead of v-if

[Jialufeng]

V-show doesn't solve my problem.

[nallown]

@Jialufeng I can help you fix your problem. Start by identifying where the problem is coming from, remove all divs spans, all elements and components from your page and check if you still have it. If the error is gone then start adding some of the divs spans every element bit by bit back, add them one by one back and check if the error comes back.

Message me when you find when out what part of your page is giving you the error and send me a snippet of the element that has the error.

These errors you can learn to fix over time without even realizing it, after you write enough Vue code you'll start to realize that you remember the things you should and shouldn't do so that you won't get this error ever again.

[Jialufeng]

@nallown It has been solved by a div. thank

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.