Version

3.2.0-beta.7

Reproduction link

https://github.com/mariusa/vue32-error

Steps to reproduce

npm init vite@latest my-vue-app --template vue
cd my-vue-app
# add "@vue/compiler-sfc": "3.2.0-beta.7" to devDependencies, required for refSugar. Change vue version to "3.2.0-beta.7"
npm i
npm i bootstrap bootstrap-vue-3 --save

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3';

import 'bootstrap/dist/css/bootstrap.css'

const app = createApp(App);
app.use(BootstrapVue3);
app.mount('#app')

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3   Vite" />
  <b-card>test</b-card>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

What is expected?

have the app work and render 'test'

What is actually happening?

[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) at at

Tried to use refSugar with 3.2.0

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

I've spent 2h to narrow down the cause. The vite starter repro has only 1 library, bootstrap-vue-3 It works fine with vue 3.1.x

Only when changing to vue 3.2.0-beta.7 package.json, the error appears:

{
    "name": "my-vue-app",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "bootstrap-vue-3": "0.0.1-alpha.2",
        "vue": "3.2.0-beta.7"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^1.3.0",
        "@vue/compiler-sfc": "3.2.0-beta.7",
        "vite": "^2.4.4"
    }
}

Your problem is with bootstrap-vue-3. have a look at it in your node_modules folder. it has its own node_modules subfolder, containing Vue 3.1.5

The reason for this is, as far as I can tell, that this package declares Vue as a dependency (which should rather be an optional peerDependency) combined with the fact that 3.2-beta isn't the latest version - it's on the next tag.

The end result is that you app is importing 3.2-beta, while bootstrap-vue-3 imports it's own 3.1.5.

This would have to be resolved in that package.

Thank you, Thorsten, appreciate your time for finding the cause!