"Invalid VNODE type: Symbol(Fragment)" when using v-for from an external vue component

[yvvas]

Version

3.0.2

Reproduction link

https://github.com/yvvas/vue3--v-for--bug

Steps to reproduce

1. clone the repository
2. navigate to the test-component directory and use npm install
3. navigate to the app directory and use npm install
4. start the application from the app directory with npm run start
5. navigate to localhost:8080 from a web browser and the Invalid VNode type: Symbol(Fragment) warning will show up in the console

What is expected?

The component should render lists

What is actually happening?

Other variables render fine, however v-for nodes are ignored and not rendered.

---

I have included some references in the README.md to some other issues that look related.

[KaelWD]

#2108 (comment)
#2423 (comment)

[edison1105]

here is the bug.
The type of v-for VNode is not equal to Fragment. The switch went to default.

[KaelWD]

Because you have two instances of vue.

[luwuer]

Because you have two instances of vue.

Yes, if memory serves it doesn't exist in vue2, so it's maybe a bug about compiler.

In the example above, the "app" directory build rely on "../test-componnet/node_modules" directory. It's mean that import-on-demand irrealizable.

[yxmg]

same problem，try to delete 「vue」 under the dependencies field in package.json and add to devDependencies

[industral]

still have the same weird issue, have no idea what's going on. Tried to remove one div - warning gone.

[skirtles-code]

There are lots of potential reasons for two copies of Vue to be pulled in. Even if the build configuration for the external component library is correct it can still fail if the consuming application is using link or a file: path. I've outlined potential solutions/workarounds for Vue CLI, webpack and Vite here: #2064 (comment).

[industral]

Looks like it doesn't have anything with two copies with vue. Checked with BundleAnalyzerPlugin, it's only 1 copy. Also tried your solution - the same.
I found that issue appears when using v-for, in that case it fails with Symbol(Fragment), and using just text without wrapped into tag - it will fail with Symbol(Text).

e.g.

<template>
123
<div>456</div>
789
</template>

because of 123 and 789 entire component just doesn't render it's content. Removing them or wrap into div/span - works. the same with v-for. At least it's what I found.

[skirtles-code]

@industral Unless you can provide a reproduction it's very difficult to help you. Both of the scenarios you've described will cause a component to render a fragment but under normal circumstances that will work just fine. I've encountered this same error several times before and every time it turned out to be because two copies of Vue were being pulled in.

You'll likely find other things don't work too. For example, trying to use inject or onMounted in the setup function of the external component will most likely fail with a warning that claims they were used outside of setup.

I suggest you create a reproduction of your issue and request help debugging the problem on the Vue Discord.

[industral]

Unless you can provide a reproduction it's very difficult to help you

here I created simple reproducible example https://github.com/industral/vue-symbol-issue

[skirtles-code]

@industral In index.js, change this:

import {createApp} from 'vue/dist/vue.esm-browser.js';

to this:

import {createApp} from 'vue';

Then in webpack.config.js, get rid of your existing resolve section and replace it with this:

resolve: {
  alias: {
    vue$: 'vue/dist/vue.esm-bundler.js'
  }
},

That seemed to be enough to get it to work for me.

Please use Vue Discord for help requests in future. You'll usually get help pretty quickly on there. Posting comments on old, closed issues here will normally go unnoticed.

[industral]

wow. Many thanks @skirtles-code ! I have no idea how you were able to manage that. Hope that will help someone else as well.
Works 🎉🎉🎉

[kkursor]

thanks, @skirtles-code - I've learning Vue and things like this make me cry and want to stop it