Getting DOMException [NotFoundError: "Node was not found"

[kyoukhana]

I implemented vue-progress but when i switch between routes I get the following error

DOMException [NotFoundError: "Node was not found"

Routes

export default [
    {path: "/",name:"home", component: (resolve) => { require(["../components/views/home.vue"], resolve)}, },
    {path: ":referral",name:"home", component: (resolve) => { require(["../components/views/home.vue"], resolve)} },
    {path: "/404",name:"404", component: (resolve) => { require(["../components/views/404.vue"], resolve)}},
    {path: "/403",name:"403", component: (resolve) => { require(["../components/views/403.vue"], resolve)}},
    {path: "/contact",name:"contact", component: (resolve) => { require(["../components/views/contact.vue"], resolve)} },
    {path: "/contact/:referral",name:"contact", component: (resolve) => { require(["../components/views/contact.vue"], resolve)} },
    {path: "/privacy/:referral",name:"privacy", component: (resolve) => { require(["../components/views/privacy.vue"], resolve)} },
    {path: "/privacy",name:"privacy", component: (resolve) => { require(["../components/views/privacy.vue"], resolve)} },
    {path: "/terms",name:"terms", component: (resolve) => { require(["../components/views/terms.vue"], resolve)} },
    {path: "/terms/:referral",name:"terms", component: (resolve) => { require(["../components/views/terms.vue"], resolve)} },
    {path: "/signupplan",name:"supplan", component: (resolve) => { require(["../components/views/singupplans.vue"], resolve)} },
    {path: "/signupplan/:referral",name:"supplan", component: (resolve) => { require(["../components/views/singupplans.vue"], resolve)} },
    {path: "/faq",name:"faq",component: (resolve) => { require(["../components/views/faq.vue"], resolve)} },
    {path: "/faq/:referral",name:"faq",component: (resolve) => { require(["../components/views/faq.vue"], resolve)} },
    {path: "/signup/:referral",name:"signp", component: (resolve) => { require(["../components/views/users/signinup.vue"], resolve)} }
]

app.vue

<template>
    <div>
        <router-view></router-view>
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<style>
    @import '../../css/load.css';
     body{
         height:100%;
     }
    .mdl-layout-login {
        align-items: center;
        justify-content: center;
    }
    .mdl-layout__content-login {
        padding: 24px;
        flex: none;
    }

</style>

<script>
    export default {
        mounted () {
            //  [App.vue specific] When App.vue is finish loading finish the progress bar
            this.$Progress.finish()
        },
        created () {
            //  [App.vue specific] When App.vue is first loaded start the progress bar
            this.$Progress.start()
            //  hook the progress bar to start before we move router-view
            this.$router.beforeEach((to, from, next) => {
                //  does the page we want to go to have a meta.progress object
                if (to.meta.progress !== undefined) {
                let meta = to.meta.progress
                // parse meta tags
                this.$Progress.parseMeta(meta)
            }
            //  start the progress bar
            this.$Progress.start()
            //  continue to next page
            next()
        })
            //  hook the progress bar to finish after we've finished moving router-view
            this.$router.afterEach((to, from) => {
                //  finish the progress bar
                this.$Progress.finish()
        })
        }
    }
</script>

Libraries

    "@websanova/vue-auth": "^2.11.0-beta",
    "axios": "^0.15.3",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.23.0",
    "dropzone": "^4.3.0",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "image-webpack-loader": "^3.3.0",
    "jimp": "^0.2.27",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "material-design-lite": "^1.3.0",
    "path": "^0.12.7",
    "responsive-loader": "^0.7.0",
    "style-loader": "^0.13.0",
    "svg-url-loader": "^1.1.0",
    "url-loader": "^0.5.8",
    "v-qrcode": "^1.0.3",
    "vee-validate": "^1.0.0-beta.10",
    "vue": "^2.2.6",
    "vue-axios": "^1.2.2",
    "vue-hot-reload-api": "^2.0.11",
    "vue-html-loader": "1.2.3",
    "vue-lazyload": "^1.0.3",
    "vue-loader": "^11.3.4",
    "vue-mdl": "^1.1.1",
    "vue-progressbar": "^0.7.2",
    "vue-qrcode-component": "^2.1.1",
    "vue-resource": "^1.3.1",
    "vue-router": "^2.4.0",
    "vue-scrollto": "^2.4.2",
    "vue-strap": "^1.0.11",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.2.6",
    "vue2-dropzone": "^2.2.6",
    "vuelidate": "^0.2.0",
    "vuex": "^2.3.0",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^1.16.1"

app.js

import Vue from 'vue'
import VueQRCodeComponent from 'vue-qrcode-component'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VueAuth from '@websanova/vue-auth'
import VueProgressBar from 'vue-progressbar'
import App from './components/app.vue'
import mdl from 'material-design-lite'
import VueMdl from 'vue-mdl'
import VueX from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueScollTo from 'vue-scrollto'
import VueLazyload from 'vue-lazyload'
import VeeValidate from 'vee-validate'

Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(VeeValidate);
Vue.use(VueMdl);
Vue.use(VueAxios, axios);
Vue.use(VueScollTo);

const options = {
    color: '#bffaf3',
    failedColor: '#874b4b',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'left',
    inverse: false
}

Vue.use(VueProgressBar, options)

/*Import Routes */
import siteRoutes from './routes/site'
import adminRoutes from './routes/adminroutes'
import userRoutes from './routes/userroutes'

/*Define Routes Object */
const loadRoutes = [
    ...siteRoutes
];

/*Define Router */
const router = new VueRouter({
    hashbang: false,
    linkActiveClass: 'active',
    mode: 'history',
    routes:loadRoutes
});

Vue.router = router;
/*End Define Router */

Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: '/images/loose/loader-error.svg',
    loading: '/images/loose/loader.svg',
    attempt: 5,
    listenEvents: [ 'scroll' ]
})

// register custom select
Vue.component('select-c', require('./components/custom/select.vue'));

/*Register Dropzone */
Vue.component('dropzone', require('./components/custom/dropzonetwo.vue'));

/*QrCode */
Vue.component('qr-code', VueQRCodeComponent);

/*CRFC TOKEN For form validations */
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

Vue.http.options.root="";

Vue.use(VueAuth,{
    authRedirect:'/',
    auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
    http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
    token: [{request: 'token', response: 'token', authType: 'bearer', foundIn: 'header'}],
    tokenName:'token',
    loginData: {url: '/api/auth', method: 'POST', redirect: 'dashboard'},
    logoutData: {url: '/api/logout', method: 'POST', redirect: 'login',  makeRequest: false},
    fetchData: {url: '/api/account', method: 'GET' , authType: 'bearer',enabled: true},
    rolesVar: 'role_id',
    refreshData: {enabled: false}
});

const app = new Vue({
    router,
    ...App
})

app.$mount('#app');

[HazemHa]

i am also have the same problem when I changed style by clicked on button.

let btn2 = this.$refs['subs_'+channel_id][0].$el if(btn2.innerText == "UNSUBSCRIBE"){ let newClass = btn2.getAttribute("class").replace("grey","red"); btn2.setAttribute("class",newClass); btn2.innerText = 'Subscribe'; }else{ let newClass = btn2.getAttribute("class").replace("red","grey"); btn2.setAttribute("class",newClass); btn2.innerText = 'UnSubscribe'; }