title: Vuejs hot reload Cannot read property 'Ctor' of undefined
body: <p>I have this error when I update:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I tried to change versions for vue-bootstrap, webpack, hot-reload but I always have this error.</p>
  
  <p>this is my package.json </p>
  
  <pre><code>{
    "name": "v5",
    "description": "MTN Project V5",
    "version": "1.0.0",
    "author": "ligadata-alaa &lt;admhemed@gmail.com&gt;",
    "private": true,
    "engines": {
      "node": "&gt;=6",
      "npm": "&gt;=3"
    },
    "scripts": {
      "build": "cross-env-shell NODE_ENV=production npm run clean &amp;&amp; npm run lint &amp;&amp; npm run test &amp;&amp; npm run compile",
      "ci:teamcity": "karma --env=tc start config/karma.coverage.js &amp;&amp; npm run coverage:remap",
      "ci:jenkins": "karma --env=jk start config/karma.coverage.js &amp;&amp; npm run coverage:remap",
      "clean": "rimraf dist &amp;&amp; rimraf coverage",
      "compile": "webpack --config config/webpack.config.prod.js",
      "coverage": "npm run coverage:run &amp;&amp; npm run coverage:remap &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import Vue from 'vue';
  import { makeHot, reload } from './util/hot-reload';
  import {router} from './router';
  import store from './store/index';
  const navbarComponent = () =&gt; import('./components/navbar').then(({ NavbarComponent }) =&gt; NavbarComponent);
  const sidebarComponent = () =&gt; import('./components/sidebar').then(({ SidebarComponent }) =&gt; SidebarComponent);
  const bottombarComponent = () =&gt; import('./components/bottombar').then(({ BottombarComponent }) =&gt; BottombarComponent);
  // const navbarComponent =
  // () =&gt; import(/* webpackChunkName: 'navbar' */'./components/navbar').then(({ NavbarComponent }) =&gt; NavbarComponent)
  
  import './sass/main.scss';
  
  import VueResource from 'vue-resource';
  Vue.use(VueResource);
  
  if (process.env.ENV === 'development' &amp;&amp; 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',
        () =&gt; 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;
  </code></pre>
  
  <p>router.ts</p>
  
  <pre><code>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 = () =&gt; import('./components/home').then(({ HomeComponent }) =&gt; HomeComponent);
  const aboutComponent = () =&gt; import('./components/about').then(({ AboutComponent }) =&gt; AboutComponent);
  const htmlComponent = () =&gt; import('./components/html').then(({ HtmlComponent }) =&gt; HtmlComponent);
  const gridComponent = () =&gt; import('./components/grid').then(({ GridComponent }) =&gt; GridComponent);
  // const homeComponent = () =&gt;
  // import(/* webpackChunkName: 'home' */'./components/home').then(({ HomeComponent }) =&gt; HomeComponent)
  // const aboutComponent = () =&gt;
  // import(/* webpackChunkName: 'about' */'./components/about').then(({ AboutComponent }) =&gt; AboutComponent)
  // const listComponent = () =&gt;
  // import(/* webpackChunkName: 'list' */'./components/list').then(({ ListComponent }) =&gt; ListComponent)
  if (process.env.ENV === 'development' &amp;&amp; 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',
        () =&gt; reload(homeModuleId, (require('./components/home') as any).HomeComponent)));
  
    makeHot(homeModuleId, gridComponent,
      module.hot.accept('./components/grid',
        () =&gt; reload(gridModuleId, (require('./components/grid') as any).GridComponent)));
  
    makeHot(aboutModuleId, htmlComponent,
      module.hot.accept('./components/about',
        () =&gt; reload(aboutModuleId, (require('./components/about') as any).AboutComponent)));
  
    makeHot(aboutModuleId, aboutComponent,
      module.hot.accept('./components/about',
        () =&gt; reload(aboutModuleId, (require('./components/about') as any).AboutComponent)));
  
  }
  
  Vue.use(VueRouter);
  
  export const createRoutes: () =&gt; RouteConfig[] = () =&gt; [
    {
      path: '/',
      component: homeComponent
    },
    {
      path: '/home',
      component: homeComponent
    },
    {
      path: '/grid',
      component: gridComponent
    },
    {
      path: '/html',
      component: htmlComponent
    },
    {
      path: '/about',
      component: aboutComponent
    }
  ];
  
  export const createRouter = () =&gt; new VueRouter({ mode: 'history', routes: createRoutes() });
  export const router = createRouter();
  router.afterEach((to, from) =&gt; {
    if (to.path === '/grid') {
      store.dispatch('search/checkIfThereIsASearch', []);
    }
  });
  </code></pre>