Skip to content

<Transition appear> leads to hydration mismatch with SSR #13335

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
danielroe opened this issue May 16, 2025 · 1 comment · May be fixed by #13339
Open

<Transition appear> leads to hydration mismatch with SSR #13335

danielroe opened this issue May 16, 2025 · 1 comment · May be fixed by #13339
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope:hydration scope: transition

Comments

@danielroe
Copy link
Member

danielroe commented May 16, 2025 •
edited
Loading

Vue version

3.5.14

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9kbtuwzAMRX9F4BzYQzsFboC2yJAObdFm1CLYrKNUL4iSayDwv1eS8xqCbMQ9l+SldIBn56ohIiyhCaidEgFX3DDWbL0wJIO0hgnnUPgiJ9DJgbVKED1xkFqUksNqw3ZiQEZW44yRmjp552n1ZVwSmvpqFywgUGvNj+yrPVmTohxyD4fWaicV+g+X+9KSJSskM6GU/XsrWvARFye93WH7e0Pf05g1Dp8eCf2AHM4sCN9jmPH6+x3HVJ+htl1UyX0HfiFZFXPG2fYSTZdiX/lK2o121gdp+i2tx4DpOY5H5aDZORU/h/Qfr3dOv8R9qB5LHzcTTP/lXpeM

App.vue:

<template>
  <Transition appear>
    <div class="imaclass">I have some classes</div>
  </Transition>
</template>

Steps to reproduce

When you open the reproduction you will see the following message in the lower right corner: 'Hydration completed but contains mismatches.'

More info:

[Vue warn]: Hydration class mismatch on 
<div class="imaclass v-enter-from v-enter-active"> 
  - rendered on server: class="imaclass v-enter-from v-enter-active"
  - expected on client: class="imaclass"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <BaseTransition appear=true persisted=false mode=undefined  ... > 
  at <Transition appear=true > 
  at <Repl>

What is expected?

I expect no hydration mismatch.

What is actually happening?

There is a hydration mismatch.

System Info



Any additional comments?


related: #12046, #12047

      		
    

      
  





        



            
            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @danielroe
danielroe




        
  marked this as
  
  a duplicate of
nuxt/nuxt#32122


      May 16, 2025

    

  



  

  

    
  


  

      

    @danielroe
danielroe



    mentioned this issue
    
      May 16, 2025
    





  


  

      
  
  Closed

  







  









      

  
      



  

  @oom-





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

      

      
            oom-
  

      

      

      commented


        May 16, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
        
      Loading

    
  



    


  





      


        


  
    

      
          
@danielroe, Thank you for the reopening I was about to do it right now. 👍🏻


Describe the bug


If a div is surrounded by a Transition tag with :appear="true" and that this div has it's own class, it provoque an Hidratation mismatch.


✔ Working:


<Transition name="fade-in" >
    <div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>


✔ Working:


<Transition name="fade-in" :appear="true">
    <div v-if="isOpen">I have some classes</div>
</Transition>


❌ No Working:


<Transition name="fade-in" :appear="true">
    <div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>


Additional context



  
    
    chrome_jADm3IRPpZ.mp4
    
  

  




Logs


- rendered on server: class="imaclass fade-in-enter-from fade-in-enter-active"
- expected on client: class="imaclass"

      		
    

  





        


            

            
            

              
            

        

      


      

            
  

    
  
    
    

  

  


    












      

  
            

    

      
    

    


      

          @edison1105
edison1105




            added
      

  scope: transition


      

  scope: ssr


      

  🔨 p3-minor-bug

  Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

  labels


      May 16, 2025

    

  



  

  

    
  


  

      

    @edison1105
edison1105



    linked a pull request
    
      May 16, 2025
    

    that will
    close
    this issue





  


  

      
   Open

  







  




    











  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    🔨 p3-minor-bug

  Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
  

    scope:hydration

  

    scope: transition









      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
    

    Development
  




            
  
Successfully merging a pull request may close this issue.





    


  
          
      fix(hydration): handle transition appear hydration edge case

    
      vuejs/core
    





      
    

  




      

    

  
      

  

    

      3 participants
    

    

        
          @edison1105 
        
          @oom- 
        
          @danielroe