Component update fails when using custom elements/web component that bundles an older Vue version

[odzhychko]

Vue version

3.5.23

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-vtxciu5w?file=vue-3.5.24-app%2Fpackage.json

Steps to reproduce

• Open the provided link
• Run npm --prefix ./vue-3.5.22-web-component install && npm --prefix ./vue-3.5.22-web-component run build
  • This bundles a custom elements libary under vue-3.5.22-web-component/dist/index.js
• Run npm --prefix ./vue-3.5.24-app install && npm --prefix ./vue-3.5.24-app run dev
  • It uses <my-foo> from the custom elements libary
• Open the browser's developer tools
• In the preview, change the value in the input field

What is expected?

After changing the value in the input field, the text below should be updated.

What is actually happening?

The text is not updated, and the following error is reported:

Uncaught (in promise) TypeError: customElement._endPatch is not a function
    VueJS 10
        processElement
        patch
        patchBlockChildren
        processFragment
        patch
        componentUpdateFn
        run
        runIfDirty
        callWithErrorHandling
        flushJobs
vue.js:7039:25

System Info

Any additional comments?

This issue occurs when using a custom element within an application under the following circumstances:

• the custom element
  • is build with Vue
  • uses version before v3.5.23
  • bundles Vue
• the Vue application uses the version v3.5.23 or higher

It seems to have been introduced by c13e674 in `v3.5.23``

Instead of bundling Vue with the custom element, it could not be bundled, aka externalized, as described in https://vite.dev/guide/build#library-mode .

But I think, and please don't hesitate to disagree, that using a custom element that happens to bundle another Vue instance (possibly with a different version) is a legitimate use case. A custom element library might provide only dependency-free builds for reasons of simplicity or encapsulation.

[edison1105]

I can understand your approach of bundling Vue inside a custom element component library. However, doing this carries the risk of incompatibility when changes are made inside the custom element, which is unavoidable. Additionally, there are issues with HMR - see vitejs/vite-plugin-vue#644

For libraries intended for use in Vue projects, Vue should be externalized during the build process. Otherwise, you must maintain consistency in the Vue version.

It is recommended to add a new build output that externalizes Vue specifically for Vue projects to avoid the aforementioned issues.