Vuejs hot reload Cannot read property 'Ctor' of undefined

Question

I have this error when I update:

index.js:106 TypeError: Cannot read property 'Ctor' of undefined
    at index.js:202
    at Object.reload (index.js:104)
    at reload (hot-reload.ts:17)
    at router.ts:30
    at hotApply (bootstrap 796061b879a4ebee3501:605)
    at bootstrap 796061b879a4ebee3501:313
(anonymous) @ index.js:106
reload @ hot-reload.ts:17
(anonymous) @ router.ts:30
hotApply @ bootstrap 796061b879a4ebee3501:605
(anonymous) @ bootstrap 796061b879a4ebee3501:313
Promise.then (async)
hotUpdateDownloaded @ bootstrap 796061b879a4ebee3501:312
hotAddUpdateChunk @ bootstrap 796061b879a4ebee3501:289
webpackHotUpdateCallback @ bootstrap 796061b879a4ebee3501:31
(anonymous) @ 10.796061b879a4ebee3501.hot-update.js:1

I tried to change versions for vue-bootstrap, webpack, hot-reload but I always have this error.

this is my package.json

{
  "name": "v5",
  "description": "MTN Project V5",
  "version": "1.0.0",
  "author": "ligadata-alaa <[email protected]>",
  "private": true,
  "engines": {
    "node": ">=6",
    "npm": ">=3"
  },
  "scripts": {
    "build": "cross-env-shell NODE_ENV=production npm run clean && npm run lint && npm run test && npm run compile",
    "ci:teamcity": "karma --env=tc start config/karma.coverage.js && npm run coverage:remap",
    "ci:jenkins": "karma --env=jk start config/karma.coverage.js && npm run coverage:remap",
    "clean": "rimraf dist && rimraf coverage",
    "compile": "webpack --config config/webpack.config.prod.js",
    "coverage": "npm run coverage:run && npm run coverage:remap && npm run coverage:open",
    "coverage:open": "opn coverage/html-ts/index.html",
    "coverage:remap": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html",
    "coverage:run": "cross-env NODE_ENV=development karma start config/karma.coverage.js",
    "dev": "webpack-dev-server --config config/webpack.config.dev.js --hot --inline",
    "lint": "tslint src/**/*.ts",
    "serve": "http-server dist/ -g -o"
  },
  "dependencies": {
    "axios": "~0.17.1",
    "bootstrap-vue": "~2.0.0-rc.1",
    "vue": "~2.5.13",
    "vue-class-component": "~6.1.2",
    "vue-property-decorator": "~6.0.0",
    "vue-router": "~3.0.1"
  },
  "devDependencies": {
    "@types/mocha": "~2.2.47",
    "@types/node": "~9.4.0",
    "@types/sinon": "~4.1.3",
    "@types/webpack-env": "~1.13.5",
    "autoprefixer": "~7.2.5",
    "awesome-typescript-loader": "~3.4.1",
    "bootstrap": "~4.0.0",
    "chai": "~4.1.2",
    "compression-webpack-plugin": "~1.1.6",
    "copy-webpack-plugin": "~4.3.1",
    "cross-env": "~5.1.3",
    "css-hot-loader": "~1.3.6",
    "css-loader": "~0.28.9",
    "cssnano": "~3.10.0",
    "es6-promise": "~4.2.4",
    "eslint": "^5.4.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.0",
    "eslint-plugin-standard": "^3.1.0",
    "extract-text-webpack-plugin": "~3.0.2",
    "favicons-webpack-plugin": "0.0.7",
    "file-loader": "~1.1.6",
    "html-webpack-plugin": "~2.30.1",
    "http-server": "~0.11.1",
    "istanbul-instrumenter-loader": "~3.0.0",
    "json-loader": "~0.5.7",
    "karma": "~2.0.0",
    "karma-chai": "~0.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage": "~1.1.1",
    "karma-junit-reporter": "~1.2.0",
    "karma-mocha": "~1.3.0",
    "karma-mocha-reporter": "~2.2.5",
    "karma-sinon": "~1.0.5",
    "karma-source-map-support": "~1.2.0",
    "karma-sourcemap-loader": "~0.3.7",
    "karma-teamcity-reporter": "~1.1.0",
    "karma-webpack": "~2.0.9",
    "lodash.merge": "~4.6.0",
    "minimist": "~1.2.0",
    "mocha": "~5.0.0",
    "ncp": "~2.0.0",
    "node-sass": "~4.7.2",
    "opn-cli": "~3.1.0",
    "optimize-css-assets-webpack-plugin": "~3.2.0",
    "postcss-loader": "^2.0.10",
    "raw-loader": "~0.5.1",
    "remap-istanbul": "~0.10.1",
    "rimraf": "~2.6.2",
    "sass-loader": "~6.0.6",
    "sinon": "~4.2.2",
    "standard": "~10.0.3",
    "style-loader": "~0.20.1",
    "tslint": "~5.9.1",
    "tslint-config-standard": "~7.0.0",
    "tslint-loader": "~3.5.3",
    "typescript": "~2.7.1",
    "url-loader": "~0.6.2",
    "vue-cli-plugin-vuetify": "^0.1.6",
    "vue-hot-reload-api": "~2.2.4",
    "webpack": "~3.10.0",
    "webpack-dev-server": "~2.11.1"
  }
}

main.ts

import Vue from 'vue';
import { makeHot, reload } from './util/hot-reload';
import {router} from './router';
import store from './store/index';
const navbarComponent = () => import('./components/navbar').then(({ NavbarComponent }) => NavbarComponent);
const sidebarComponent = () => import('./components/sidebar').then(({ SidebarComponent }) => SidebarComponent);
const bottombarComponent = () => import('./components/bottombar').then(({ BottombarComponent }) => BottombarComponent);
// const navbarComponent =
// () => import(/* webpackChunkName: 'navbar' */'./components/navbar').then(({ NavbarComponent }) => NavbarComponent)

import './sass/main.scss';

import VueResource from 'vue-resource';
Vue.use(VueResource);

if (process.env.ENV === 'development' && module.hot) {
  const navbarModuleId = './components/navbar';
  // first arguments for `module.hot.accept` and `require` methods have to be static strings
  // see https://github.com/webpack/webpack/issues/5668
  makeHot(navbarModuleId, navbarComponent,
    module.hot.accept('./components/navbar',
      () => reload(navbarModuleId, (require('./components/navbar') as any).NavbarComponent)));
}

// tslint:disable-next-line:no-unused-expression
export const VueApp = new Vue({
  el: '#app-main',
  router,
  store,
  http: {
    root: ''
  },
  components: {
    navbar: navbarComponent,
    sidebar: sidebarComponent,
    bottombar: bottombarComponent
  }
});
Vue.config.productionTip = false;

router.ts

import Vue from 'vue';
import VueRouter, { Location, Route, RouteConfig } from 'vue-router';
import { makeHot, reload } from './util/hot-reload';
import store from './store/index';

const homeComponent = () => import('./components/home').then(({ HomeComponent }) => HomeComponent);
const aboutComponent = () => import('./components/about').then(({ AboutComponent }) => AboutComponent);
const htmlComponent = () => import('./components/html').then(({ HtmlComponent }) => HtmlComponent);
const gridComponent = () => import('./components/grid').then(({ GridComponent }) => GridComponent);
// const homeComponent = () =>
// import(/* webpackChunkName: 'home' */'./components/home').then(({ HomeComponent }) => HomeComponent)
// const aboutComponent = () =>
// import(/* webpackChunkName: 'about' */'./components/about').then(({ AboutComponent }) => AboutComponent)
// const listComponent = () =>
// import(/* webpackChunkName: 'list' */'./components/list').then(({ ListComponent }) => ListComponent)
if (process.env.ENV === 'development' && module.hot) {
  const homeModuleId = './components/home';
  const htmlModuleId = './components/html';
  const gridModuleId = './components/grid';
  const aboutModuleId = './components/about';

  // first arguments for `module.hot.accept` and `require` methods have to be static strings
  // see https://github.com/webpack/webpack/issues/5668
  makeHot(homeModuleId, homeComponent,
    module.hot.accept('./components/home',
      () => reload(homeModuleId, (require('./components/home') as any).HomeComponent)));

  makeHot(homeModuleId, gridComponent,
    module.hot.accept('./components/grid',
      () => reload(gridModuleId, (require('./components/grid') as any).GridComponent)));

  makeHot(aboutModuleId, htmlComponent,
    module.hot.accept('./components/about',
      () => reload(aboutModuleId, (require('./components/about') as any).AboutComponent)));

  makeHot(aboutModuleId, aboutComponent,
    module.hot.accept('./components/about',
      () => reload(aboutModuleId, (require('./components/about') as any).AboutComponent)));

}

Vue.use(VueRouter);

export const createRoutes: () => RouteConfig[] = () => [
  {
    path: '/',
    component: homeComponent
  },
  {
    path: '/home',
    component: homeComponent
  },
  {
    path: '/grid',
    component: gridComponent
  },
  {
    path: '/html',
    component: htmlComponent
  },
  {
    path: '/about',
    component: aboutComponent
  }
];

export const createRouter = () => new VueRouter({ mode: 'history', routes: createRoutes() });
export const router = createRouter();
router.afterEach((to, from) => {
  if (to.path === '/grid') {
    store.dispatch('search/checkIfThereIsASearch', []);
  }
});

Answer 1

I got over it just by refreshing the page.