JS stops working after the first transition to another page

#288 # Description

When built, one transition to another page ruins all JavaScript — I can’t go back or switch to another page, or animations stop working. This happens only on desktop.

In console, you can see:

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:40392)
    at p (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:52966)
    at f (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:52703)
    at h (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:53049)
    at E (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56391)
    at E (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56326)
    at E (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56326)
    at E (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56326)
    at E (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56326)
    at a.__patch__ (https://sergeyfilimonovcom-jb23svs5l.now.sh/assets/js/app.5400ccbf.js:7:56749)
app.5400ccbf.js:7 TypeError: Cannot read property '_isDestroyed' of undefined
    at destroy (app.5400ccbf.js:7)
    at w (app.5400ccbf.js:7)
    at w (app.5400ccbf.js:7)
    at a.__patch__ (app.5400ccbf.js:7)
    at a.t.$destroy (app.5400ccbf.js:7)
    at destroy (app.5400ccbf.js:7)
    at w (app.5400ccbf.js:7)
    at a.__patch__ (app.5400ccbf.js:7)
    at a.t.$destroy (app.5400ccbf.js:7)
    at destroy (app.5400ccbf.js:7)

Steps to reproduce

Go to https://sergeyfilimonovcom-jb23svs5l.now.sh and surf around the website. You are going to notice that routing will not be working after the first transition.

If you delete <Messenger/> from https://github.com/sergeyfilimonov/sergeyfilimonov.com/blob/master/src/layouts/Default.vue the problem goes away but I can’t get WHY. Sometimes it is working, sometimes not. For instance, if you just move the component right after <div class"layout"> the bug is gone, here is the proof: https://sergeyfilimonovcom-bd6stk8jn.now.sh. If you move it back, right before </div> it stops working.

You can see the repo here https://github.com/sergeyfilimonov/sergeyfilimonov.com

Environment

Libs:
- gridsome version: 5.0.4

Browser:
- [x] Chrome (desktop) version XX
- [x] Safari (desktop) version XX
 
For Tooling issues:
- Node version: 8.12.0 
- Platform:  Mac

[sergeyfilimonov]

@hjvedvik I wrote above:

For instance, if you just move the [Messenger] component right after <div class"layout"> the bug is gone, here is the proof: https://sergeyfilimonovcom-bd6stk8jn.now.sh. If you move it back, right before </div> it stops working.

Now I placed it back to </div> and have no problems with routing and other stuff! It seems adding:

chainWebpack (config) {
    config.mode('development')
  }

in the module.exports of gridsome.config.js really helped but I don’t know why. Thanks!

[ricardov03]

@hjvedvik I wrote above:

For instance, if you just move the [Messenger] component right after <div class"layout"> the bug is gone, here is the proof: https://sergeyfilimonovcom-bd6stk8jn.now.sh. If you move it back, right before </div> it stops working.

Now I placed it back to </div> and have no problems with routing and other stuff! It seems adding:

chainWebpack (config) {
    config.mode('development')
  }

in the module.exports of gridsome.config.js really helped but I don’t know why. Thanks!

Sorry, Can anybody help me to figure out why config.mode(‘development’) it’s no working in the build for me?