Subscribe on changes!

Hot update failed, I don't know if it's a problem with vite or vue

avatar
Mar 7th 2023

Vue version

3.2.45

Link to minimal reproduction

https://github.com/ketao4869/vite-bug

Steps to reproduce

  1. pnpm install pnpm run dev

  2. Go to src\Components\SearchForm\index.vue and modify this file

  3. The browser finds that there is no hot update, but the new page in the network request has been requested

  4. 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

1 2

bug

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

avatar
Mar 7th 2023

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
avatar
Mar 7th 2023

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:

  1. The direct import addded by the plugin
  2. 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.