Vue3 Presence of a css class on element in single file component causes rendering failure when added to dom, Invalid VNode type: Symbol()

Question

Edit 10/7/2020: I couldn't ever get this to work. Ended up falling back to ASP.NET Razor server rendering, despite it not being what I wanted for this component. If anyone has any ideas in the future, I'm all ears.

So, I'm making a single file component that represents a notification panel on my site. The site is mostly generated server side with ASP.NET Core's Razor view engine. This notification panel will be the second Vue component added to the site, as it needs to be a bit more reactive/responsive than a server rendered component will allow us.

The component has no style defined in it's definition, rather the component uses the global site.css added in the <head> tag.

Onto the issue...

I'm noticing some very strange behavior with Vue 3's component rendering. Below is a sanitized version of my component:

NotificationPanel.vue

<template>
    <div class="custom-item-inner custom-rounded">
        <p class="custom-h2style">
            Notifications
        </p>
        <div class="custom-section-divide">
            <p class="custom-section-title">Section Title</p>
            <p class="custom-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor, odio sit amet volutpat pretium.</p>
            <div class="custom-item-link">
                Perform Action
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "notifications-panel",
        data() {
            return {
                placeholder: ""
            }
        },
        mounted() {
            console.log("Hello world");
        }
    }
</script>

My expectation is that this would render to the component to the page and the globally defined CSS would get applied to this markup. Instead, I'm seeing a warning in the developer console:

The white line that the arrow is pointing to is the component's container, which is defined in CSHTML. The component itself is not rendered, but was definitely mounted, judging by console output.

Here's the weird part: If I remove class="custom-section-title" from the <p> tag in the middle of my template, this is what gets rendered:

What on earth is happening? This makes absolutely zero sense to me...

Any ideas? Thanks

Extra details:

This is how the component is being used in the cshtml code.

<!-- Notifications Block-->
<div class="col-12 col-lg-4 col-xl-3 sidenav custom-item custom-notifys">
    <notifications-panel />
</div>

in main.js, I'm importing createApp from 'vue/dist/vue.esm-browser', which was explained to me here.

Also, I get the same result (error vs rendered) when I run this sanitized version of the code. Even though none of the css classes exist in the sanitized version, vue specifically cares about the style on that one p tag. Very odd — Nick
– Nick, Commented Oct 1, 2020 at 19:17

Murad · Accepted Answer · 2021-08-25 17:30:46Z

2

If you are having more than one copy of vue included in the app then you can face this kind difficulty. limit your different configurations to make and include single copy of vue.

Vue 2 syntax

import Vue from 'vue'
import VueRouter from 'vue-router'  
Vue.use(VueRouter)

//your code ..

Vue 3: import vue 3 like this.

 import {createApp} from 'vue';

Or use the following syntax

import * as Vue from 'vue';
import * as VueRouter from 'vue-router';

//your code ..

then you can use webpack, laravel-mix etc. to generate single files.

answered Aug 25, 2021 at 17:30

Murad

1,19019 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diego Alberto Zapata Häntsch · Accepted Answer · 2022-09-20 20:39:22Z

For those with this same issue, the answer of @Murad is correct.

If you are loading more than one instance of Vue, this error happened. In my case, I was trying to create a small server to run E2E tests over my plugin.

In the main repository, I added Vue as a dependency but on the small app/server used to do the E2E tests I was using the Vue CDN because I was trying to serve small HTML pages using Vite for it.

My mistake was that I think Vite only serves the pages, but behind the hood, it is using Vue when we use the Vue plugin for Vite.

I solved it by removing the CDN of Vue from the HTML and importing directly the Vue package from my node_modules to create the small app that loads my plugin in order to do the E2E tests.

import {createApp} from 'vue'; // instead of use the Vue CDN

I Googled this error and only find the reason for that, I mean "load Vue more than once a time" but any answer explains why this happens.

I hope this explanation will be useful.

Regards and good luck.

Collectives™ on Stack Overflow

Vue3 Presence of a css class on element in single file component causes rendering failure when added to dom, Invalid VNode type: Symbol()

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related