how to avoid generating <div> tag when using <placeholder>

[M4tZheng]

Using Sitecore JSS placeholder tag will generate a div, which is different from developing with Sitecore MVC. Is there a way to avoid generating these div tags? I followed Sitecore documentation: JSS placeholder documentation

Here is the code used and html generated:

Promo Container

`

`

Promo Card

Page Layout YAML

> placeholders:
      app-promos:
        - componentName: PromoCard
          fields:
            heading: PromoCard1
            image: 
              src: /data/media/img/promo-card-1.jpg
              alt: card1
            text: Card 1 desc...
            headline: Card 1
        - componentName: PromoCard
          fields:
            heading: PromoCard1
            image: 
              src: /data/media/img/promo-card-2.jpg
              alt: card2
            text: Card 2 desc...
            headline: Card 2
        - componentName: PromoCard
          fields:
            heading: PromoCard1
            image: 
              src: /data/media/img/promo-card-3.jpg
              alt: card3
            text: Card 3 desc...
            headline: Card 3

Generated HTML

Even the JSS sample code has the non-sense div generated.

[nickwesselman]

@M4tZheng Can you let us know which JavaScript framework you are using?

[M4tZheng]

@M4tZheng Can you let us know which JavaScript framework you are using?

@nickwesselman vue js - release 13.0.0. no issue there with react js 13.

[nickwesselman]

@M4tZheng In React we are able to use Fragments to avoid a wrapping div. This capability was not added to Vue until Vue 3.x. We are planning to upgrade but do not have a committed release/date for this yet.

A workaround is to use the SitecoreJssPlaceholderPlugin as documented here.

[nickwesselman]

Fragment support will be introduced with Vue 3.x in the JSS 19.0 release. See #742.