Nested Vue component does not render when bundled separately using Webpack for Options API

[gerteck]

Vue version

3.5.13 (also tested on 3.3.11)

Link to minimal reproduction

https://github.com/gerteck/vue-render-bug

Steps to reproduce

1. Setup:
   • Create a Vue project with components using Vue 3.x.
   • Bundle Vue components separately from the server-side rendering logic using Webpack (using webpack-vue.config.js).
   • Use the bundled components in the server-side rendering script (index.mjs or index-server.js).

Actual Behavior: When Vue components are bundled separately (using Webpack) and imported into the server-side code, the nested components do not render as expected. The output is missing the content of the child component (Test2Component), but the parent component (TestComponent) is rendered.

What is expected?

Expected Behavior:

The nested Vue component (e.g., TestComponent) should render correctly with its child components (e.g., Test2Component) when bundled separately.

What is actually happening?

When Vue components are bundled separately (using Webpack) and imported into the server-side code, the nested components do not render as expected. The output is missing the content of the child component (Test2Component), but the parent component (TestComponent) is rendered.

The child component is rendered as a empty comment.

Also getting the relevant errors (tested on separate setup)

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Component <Anonymous> is missing template or render function.

System Info

node v20.16.0

Any additional comments?

• An additional note is that the child component renders when using <script setup> Compositions API but not for <script> Options API as well.
• Related (?) stackOverFlow (unsolved): https://stackoverflow.com/questions/77592889/vue3-component-is-not-rendering-when-imported-using-options-api
• This doesn't seem to occur when mounting
• I hope that it is not an issue with the webpack setup or configuration, any updates on this matter would be greatly appreciated.

[skirtles-code]

I don't think this is a bug in Vue Core, I think it's just a problem with the webpack config.

The warnings you're seeing typically indicate that there are two copies of Vue being used at runtime. The Vue application is using one copy of Vue but a component within it is using a different copy. As a result, functions like resolveComponent fail because they rely on global context variables being set, but those are set within the other copy of Vue. Other functions, like provide and inject, would fail in a similar manner if you were using them.

In the Composition API example you're importing Test2 directly, so it no longer relies on resolveComponent. That dodges the issue, but it isn't really fixing it, it's just luck that it isn't hitting any of the functions that would cause it to fail.

From a quick look through the files, it seems that dist/vue-components.bundle.js is really big, much bigger than it should be for the small components you've created. It looks like there's a copy of Vue being bundled into that file.

I haven't used webpack for a while, but I think you need to add Vue to the externals section of webpack-vue.config.js.

[gerteck]

I see! Thank you so much! I tested it out and it indeed was the case, where I had to add externals: {vue: 'Vue'} into the webpack config. The file size shrank from 587KB to 483KB. The nested component also properly renders with the vue marked as external such that only one copy is used during runtime.

I am in the process of migrating an existing project from Vue 2 to Vue 3, so I was having trouble with this. Thank you so much for taking the time to look through the issue!!