From aed4621b4b4427e37385a4d8645c5a1f1cb361fb Mon Sep 17 00:00:00 2001 From: Razvan Stoenescu Date: Thu, 4 Nov 2021 14:55:54 +0200 Subject: [PATCH] fix: HMR not working correctly with vue-class-component components vue-loader not registering "__hmrId" on the correct component property when component is created with vue-class-component. This leads to vue/compiler-sfc/runtime-core/src/render.ts mountComponent() function to not call registerHMR() on the instance (because __hmrId is not attached properly): if (__DEV__ && instance.type.__hmrId) { registerHMR(instance) } Not registering for HMR means the createRecord() map will never get injected any component instances, so when module.hot.accept() + api.rerender(id, render) are called they will not apply any update due to finding no instances: module.hot.accept("./Index.vue?vue&type=template&id=4bc9d7de&ts=true", () => { console.log('re-render') api.rerender('4bc9d7de', render) // will never do anything; instances === [] }) This commit fixes the exportComponent from src/exportHelper.ts by injecting the properties (__file and later down the road __hmrId) to the correct component prop: import exportComponent from ".......-loader/dist/exportHelper.js" const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"src/pages/Index.vue"]]) // ... /* hot reload */ if (module.hot) { __exports__.__hmrId = "4bc9d7de" // we now have the correct __exports__ --- src/exportHelper.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/exportHelper.ts b/src/exportHelper.ts index ebf27a3c4..9f98b41e5 100644 --- a/src/exportHelper.ts +++ b/src/exportHelper.ts @@ -1,8 +1,9 @@ // runtime helper for setting properties on components // in a tree-shakable way export default (sfc: any, props: [string, string][]) => { + const target = sfc.__vccOpts || sfc for (const [key, val] of props) { - sfc[key] = val + target[key] = val } - return sfc + return target }