skip to Main Content

Hydration children mismatch in : server rendered element contains fewer child nodes than client vdom..

Hydration children mismatch in : server rendered element contains fewer child nodes than client vdom..

Nuxt Link Not Working When Use It Within Slick

Its duplicate this content without slick..
I searched alot..
What’s the problem..
I use it as a Component

Nuxt3

<div class="products-tabs">
    <!-- tab -->
    <div id="tab1" class="tab-pane active">
        <div class="products-slick" data-nav="#slick-nav-1">
            <!-- product -->
            <div class="product">
                <div class="product-img">
                    <img src="/img/product01.png" alt="">
                    <div class="product-label">
                        <span class="sale">-30%</span>
                        <span class="new">NEW</span>
                    </div>
                </div>
                <div class="product-body">
                    <p class="product-category">Category</p>
                    <h3 class="product-name"><router-link to="product">Product</router-link></h3>
                    <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
                    <div class="product-rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <div class="product-btns">
                        <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to
                                wishlist</span></button>
                        <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to
                                compare</span></button>
                        <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick
                                view</span></button>
                    </div>
                </div>
                <div class="add-to-cart">
                    <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
                </div>
            </div>
            <!-- /product -->
        </div>
    </div>

</div>

2

Answers


  1. I solved this by commenting out the empty components.

    Component commented

    and where its called

    Called

    Login or Signup to reply.
  2. Hydration children mismatch error is mainly due to mismatch between the server-rendered HTML and the client-side virtual DOM (Vue components). The number of child nodes in the server element is different from the client-side. Check the the Vue component structure.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search