[Bug report]TypeError: __VUE_HMR_RUNTIME__.updatePageData is not a function

[yyyanghj]

Navigate failed and the console output TypeError: __VUE_HMR_RUNTIME__.updatePageData is not a function.
If I use Webpack as the bundler instead of Vite, everything will be OK.

Steps to reproduce

1. git clone this repo reproduction link
2. yarn install and yarn dev, then open http://localhost:8080/
3. Click post button then see console output

• Reproduction link / repo:

Expected behavior

Navigate to /post.html.

Screenshots

Environment info

• Browser: Microsoft Edge 89.0.774.57
• vuepress: 2.0.0-beta.3
• vuepress-vite: 2.0.0-beta.2

[yzx9]

I ran into the same issue after bump to vuepress.beta.0

[meteorlxy]

Will, there might be some conflicts with vueuse.

I think that's because we both reuse the __VUE_HMR_RUNTIME__ to handle HMR.

🤔 Seems vueuse does not handling HMR manually. So maybe vueuse somehow triggers HMR unexpectedly

[meteorlxy]

I think you should add this config to vite when using vueuse.

https://github.com/vueuse/vueuse/blob/e3d727790f8233a671baac2b6292967b14bc2552/packages/vite.config.ts#L19-L23

[meteorlxy]

That's the solution:

module.exports = {
  bundler: '@vuepress/vite',
  bundlerConfig: {
    viteOptions: {
      optimizeDeps: {
        exclude: [
          '@vueuse/core',
        ],
      },
    },
  },
}

The reason is that vite pre-bundle @vueuse/core package, together with vue package. So there are two different "vue package instance", which caused this error.

[meteorlxy]

If you are developing themes, consider following snippets:

https://github.com/vuepress/vuepress-next/blob/57967f7dec27c4148edf920decead327cc8746bf/packages/%40vuepress/plugin-nprogress/src/index.ts#L11-L23