Vue version

3.3.7

Link to minimal reproduction

https://github.com/folmert/vite-vue-hmr-umd-bug

Steps to reproduce

1. Clone the repository (it was created with npm create vite@latest)
2. Run npm install
3. Run npm run build
4. Uncomment app.mount('#app') in main.ts
5. Run npm run dev
6. Type anything in App.vue (template section), HMR works.
7. Uncomment in App.vue:

   // import * as umdTest from '../dist/hmr-test.umd.js'
   // console.log(umdTest)

8. Type anything in App.vue (template section), HMR doesn't work.
9. No profit.

What is actually happening?

I'm importing Vue3 umd module in Vite/Vue3 project. As soon as I import it, HMR (Hot Module Replacement) stops working.

What is expected?

After importing Vue3 umd module in Vite/Vue3 project HMR (Hot Module Replacement) should still work.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1245U
    Memory: 1.43 GB / 15.44 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.16.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    I was using latest Brave (1.59)
    ~~Edge: Chromium (118.0.2088.76)~~
    ~~Internet Explorer: 11.0.22621.1~~
  npmPackages:
    @vitejs/plugin-vue: ^4.2.3 => 4.4.0 
    vite: ^4.4.5 => 4.5.0

Any additional comments?

Vite maintainer has already confirmed it's not a Vite issue and that it happens because original __VUE_HMR_RUNTIME__ is being overwritten by __VUE_HMR_RUNTIME__ from imported module.

This issue didn't happen on Vue 2.

Removing this part of code from imported module's production build seems to fix it:

process.env.NODE_ENV!=="production"&&(t1().__VUE_HMR_RUNTIME__={createRecord:Hg(i5),rerender:Hg(mE),reload:Hg(gE)})

Why production build includes __VUE_HMR_RUNTIME__ anyway? Why would anyone use HMR on development env with a production build? It doesn't make any sense.

Your problem is that your lib bundle inlcudes the Vue package, which you should have excluded from the build, as per the vite docs for its library mode:

https://vitejs.dev/guide/build.html#library-mode

@LinusBorg after adding it to vite.config.js, re-building and re-running dev server I get an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'pushScopeId')

Then that might be a problem do ask help for in the "Discussions" section or on our discord.

Excluding the vue package from lib builds is correct and necessary. What the particular problem in your scenario is should be first analyzed in the community.

For anyone having a similar issue, adding optimizeDeps.include to vite.config.js fixed it for me:

optimizeDeps: {
    include: ['path/to/your/module'],
  },

The exact same path needs to be used in the import, otherwise optimizeDeps.include won't pick it up.