Hot update failed, I don't know if it's a problem with vite or vue
Vue version
3.2.45
Link to minimal reproduction
https://github.com/ketao4869/vite-bug
Steps to reproduce
pnpm install pnpm run dev
Go to
src\Components\SearchForm\index.vue
and modify this fileThe browser finds that there is no hot update, but the new page in the network request has been requested
Go to
src\Components\input\input.vue
, modify this file,normal hot update
What is expected?
The Search subcomponent can be hot updated
What is actually happening?
no hot update
You can create a new TEST folder in the src directory, and it can be hot updated after registration. Delete the SearchForm component under src\Components Move the TEST folder to src\Components and rename it SearchForm Now the SearchForm subcomponent can be hot updated. Everything is fine with the project
If you comment out the method of registering components on line 10 of src\index.ts
, you should report an error that the component is not registered, but there is no error: Failed to resolve component: SearchForm
System Info
System:
OS: Windows 10 10.0.22623
CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
Memory: 5.12 GB / 13.86 GB
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1255.0), Chromium (110.0.1587.63)
Internet Explorer: 11.0.22621.1
npmPackages:
vue: ^3.2.45 => 3.2.47
Any additional comments?
No response
Is this the problem? second lineļ¼/node_modules/.vite/deps/vue.js?v=580ba9ff
import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/SearchForm/index.vue");/* unplugin-vue-components disabled */const _sfc_main = { name: "SearchForm1" };
import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "/node_modules/.vite/deps/vue.js?v=580ba9ff";
const _hoisted_1 = /* @__PURE__ */ _createElementVNode(
"div",
null,
"SearchForm",
-1
/* HOISTED */
);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return _openBlock(), _createElementBlock(
_Fragment,
null,
[
_hoisted_1,
_createTextVNode(" 123 ")
],
64
/* STABLE_FRAGMENT */
);
}
_sfc_main.__hmrId = "1fe7aed7";
typeof __VUE_HMR_RUNTIME__ !== "undefined" && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main);
import.meta.hot.accept((mod) => {
if (!mod)
return;
const { default: updated, _rerender_only } = mod;
if (_rerender_only) {
__VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render);
} else {
__VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated);
}
});
import _export_sfc from "/@id/__x00__plugin-vue:export-helper";
export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/Code/NPM/CrudEl/CrudEl/src/components/SearchForm/index.vue"]]);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6InNDQUNBOzs7QUFLSTtBQUFxQjtBQUFBO0FBQWhCO0FBQVU7QUFBQTs7Ozs7OztBQUFmO0FBQXFCIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkQ6L0NvZGUvTlBNL0NydWRFbC9DcnVkRWwvc3JjL2NvbXBvbmVudHMvU2VhcmNoRm9ybS9pbmRleC52dWUiXSwiZmlsZSI6IkQ6L0NvZGUvTlBNL0NydWRFbC9DcnVkRWwvc3JjL2NvbXBvbmVudHMvU2VhcmNoRm9ybS9pbmRleC52dWUiLCJzb3VyY2VzQ29udGVudCI6WyI8c2NyaXB0IGxhbmc9XCJ0c1wiPlxyXG5leHBvcnQgZGVmYXVsdCB7IG5hbWU6ICdTZWFyY2hGb3JtMScgfVxyXG48L3NjcmlwdD5cclxuPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj48L3NjcmlwdD5cclxuXHJcbjx0ZW1wbGF0ZT5cclxuICAgIDxkaXY+U2VhcmNoRm9ybTwvZGl2PlxyXG4gICAgMTIzXHJcbjwvdGVtcGxhdGU+XHJcblxyXG48c3R5bGUgc2NvcGVkIGxhbmc9XCJzY3NzXCI+PC9zdHlsZT5cclxuIl19
That's likely because you use unplugin-vue-components, which will add import statements for any component it finds in src/components.
you end up with two paths to the component:
- The direct import addded by the plugin
- The indirect import from the barrel entry in /components/index, which you use for the component registration
It does not affect the input because you use a name for the component that is different from the filename, so unplugin-vue-components
does not add a direct import for it.