Vuejs hot reload Cannot read property 'Ctor' of undefined - vue.js

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 <admhemed#gmail.com>",
"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.

Answer 2

If you have changed the versions
try clearing node modules
reinstall/update npm modules
this will ensure all modules are new and correctly installed

Answer 3

Please upgrade vue-loader to 15.7.1. This PR should fix it.