Vuejs热重载无法读取未定义的属性'Ctor'

Posted 2023-03-07

【中文标题】Vuejs热重载无法读取未定义的属性\'Ctor\'

【英文标题】：Vuejs hot reload Cannot read property 'Ctor' of undefinedVuejs热重载无法读取未定义的属性'Ctor'

【发布时间】：2019-02-19 16:39:18

【问题描述】：

更新时出现此错误：

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

我尝试更改 vue-bootstrap、webpack、热重载的版本，但我总是遇到这个错误。

这是我的 package.json

  "name": "v5",
  "description": "MTN Project V5",
  "version": "1.0.0",
  "author": "ligadata-alaa <[e-mail]>",
  "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;

路由器.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', []);
  
);

【问题讨论】：

该错误显示变量Ctor 正在index.js 文件中使用，但未定义。你有 index.js 文件吗？

这是 node_modules/vue_hot_reload_api/dist/index.js。我尝试更改vue hot reload的版本，没有用

在你的 router.ts 中你能确保给定的路由和路径是正确的吗？

所有这些都是正确的并且经过测试

尝试 1) 将您的 vuejs 更新到最新的稳定版本 2) 再次删除 node_modules 和 npm i

【参考方案1】：

我只是通过刷新页面来克服它。

【参考方案2】：

如果您更改了版本

尝试清除节点模块 重新安装/更新 npm 模块 这将确保所有模块都是新的并正确安装

【参考方案3】：

请将 vue-loader 升级到 15.7.1。这个PR 应该可以修复它。